vue.js - vue样式切换

问题描述

问 题

1.我想实现的效果是点击某个div,若这个div是已经选中的状态就不进行操作,若不是,则进行样式的切换,
现在的效果是不论点哪个div都会切换样式

<div class="teacherAndStudent">
                <div class="teacherOrStudent" v-bind:class="{ active: isActive }" @click="chooseByts">
                    老师
                </div>
                <div class="teacherOrStudent" v-bind:class="{ active: !isActive }" @click="chooseByts">
                    学生
                </div>
            </div>

data () {
      return {
        isActive:true
      }
    },
    methods:{
      chooseByts (ev) {
        console.log(ev.target)
        this.isActive = !this.isActive
      }
    },

解决方案

你应该是想做成 radio 的效果

<div>
    <div :class="{ active: type === 'teacher'}" @click="change('teacher')">
        老师
    </div>
    <div :class="{ active: type === 'student'}" @click="change('student')">
        学生
    </div>
</div>

data () {
  return {
    type: null
  }
},
methods:{
  change (type) {
    this.type= type
  }
}

这篇关于vue.js - vue样式切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！