我的项目中实际使用的是vue+element ui
:class
:class等同于 v-bind:class
借用Vue官网的解释:
<div v-bind:class="[active: isActive ]"></div>
Vue官网使用时{}并不是[]但是在使用的时候发油编译器报错
本人刚接触前端,有不对的希望各位指正
上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 真值
你可以在对象中传入更多字段来动态切换多个 class。此外,v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板:
<div
class="static"
v-bind:class="[ active: isActive, 'text-danger': hasError ]"
></div>
和如下 data:
data: {
isActive: true,
hasError: false
}
结果渲染为:
<div class="static active"></div>
直接看我们需要解决的问题:
1、我们有一个span 当点击span我们需要给他添加一个‘active’样式,而且他原本也有一个样式‘menu’
<span class="menu " :class="[activeStyle == index ? 'active':'']" v-for="(item,index) in list" :key="index" @click="operator(item,index)">{{item.name}}</span>
export default {
data() {
return {
activeStyle:-1,
}
},
methods:{
operator(item,index) {
this.activeStyle=index
//item相关操作逻辑
}
}
}
如果原先span没有class的话直接就用:class前面的class就不用管了
2、同理如果需要给标签添加一个style也可以动态绑定
<el-button size="mini" :type="primaryType==index?'primary':''" v-for="(item,index) in list" :key="index" @click="operator(item),addprimary(index)">{{item.name}}</el-button>
export default {
data() {
return {
primaryType:-1,
}
},
methods:{
addprimary(index){
this.primaryType=index
},
operator(item){
}
}
}
这里click我们把方法分开了operator作为具体的业务处理,addprimary方法只处理样式
上述均为个人想法,如有不对请指正