vue实现切换class(与style的绑定)
1、先在data里面添加一个变量:isact,默认可设置为0data() {isact: 0}2、在页面中可以这么写:<li v-for="(item, index) in shopSort" @click="tabsort(index)" :class="{ active: iscur == index }">{{ item }}</li>3、在methods中添加一个方法:tab
·
1、先在data里面添加一个变量:isact,默认可设置为0
data() {
isact: 0
}
2、在页面中可以这么写:
<li v-for="(item, index) in shopSort" @click="tabsort(index)" :class="{ active: iscur == index }">{{ item }}</li>
3、在methods中添加一个方法:
tabsort(index) {
this.iscur = index;
}
2、针对一个div(点击切换class)
<template>
<div>
<span :class="{'bg-primary text-danger':isA,'bg-success text-white':!isA}" @click="toggle()">AAAAA</span>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
isA: false
}
},
methods:{
toggle:function () {
this.isA = !this.isA
}
}
}
</script>
<style scoped>
/* todo */
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)