| vue中按钮使用v | 您所在的位置：网站首页 › vue实现点击变色 › vue中按钮使用v |
vue中按钮使用v
|
当前Vue项目需要做一个按钮切换的功能（点击A号button，背景色变化；点击B号button，A号回复原背景色，B变色）
=====》
实现上述功能，最基础的方法就是，动过获取对应的dom，强制改变背景色： 开发投资 成交均价 销售面积 库存监测 YGDWKGMJ() { this.$refs.ygdwkgmj.style.backgroundColor = "#3657be"; this.$refs.xkgmj.style.backgroundColor = "#192e5b"; this.$refs.lmdj.style.backgroundColor = "#192e5b"; this.$refs.clzfcjmj.style.backgroundColor = "#192e5b"; },这种方式，虽然能实现功能，但是代码臃肿，后期维护不便。 =============================================================== 二、还有一种方法就是通过传给 v-bind:class 一个对象，以动态地切换 class {{list.name}} data() { return { leftPart: [ { name: "开发投资" }, { name: "成交均价" }, { name: "销售面积" }, { name: "库存监测" } ], changeLeftBackground: 0, }; }, methods: { leftChange(index) { this.changeLeftBackground = index; }, } .liBackground { background: -webkit-gradient(linear, 0 0, 0 100%, from(#303fb2), to(#2f70d4)); }三、直接通过activeClass==index角标相等的方法 {{ option.dishName }} methods：{ this.activeClass = index; } |
【本文地址】
公司简介
联系我们