1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > vue中通过点击事件修改css样式 两个按钮样式切换

vue中通过点击事件修改css样式 两个按钮样式切换

时间:2022-06-16 22:57:36

相关推荐

vue中通过点击事件修改css样式 两个按钮样式切换

通过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";}},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。