vue中通过点击事件修改css样式,两个按钮样式切换
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
通过ref修改
<div class="sub" ref="abc" @click="submit()">确定</div>
submit() {
if (!this.password) {//我写的判断
this.$refs.abc.style.background = "#ccc";
} else {
this.$refs.abc.style.background = "#07C160";
}
},
有的时候通过值来判断修改
<span
:class="this.state==1?'active ':'active1'"
@click="deviceEnableOrDisable(0)"
ref="abc"
>正常</span>
<span
:class="this.state==0?'active ':' active1'"
style="margin-left:10px;"
@click="deviceEnableOrDisable(1)"
ref="abc1"
>停用</span>
默认state有值的情况下,有基础样式。其次在点击修改(相当于按钮样式切换的笨方法)
deviceEnableOrDisable(value) {
if (value == 0) {
this.$refs.abc.style.background = "#52c41a";
this.$refs.abc.style.color = "#fff";
this.$refs.abc1.style.background = "transparent";
this.$refs.abc1.style.color = "#1890ff";
} else if (value == 1) {
this.$refs.abc1.style.background = "#52c41a";
this.$refs.abc1.style.color = "#fff";
this.$refs.abc.style.background = "transparent";
this.$refs.abc.style.color = "#1890ff";
}
},
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)