鼠标点击控制div层展开收缩

.展开收缩时使用的CSS动画完成的(此例子使用了第三种判断方法)

一.首先动态设置class：

1.三目运算符判断

<div class="hello" :class="isActive?'anmDiv':'aaa'"></div>

2.对象式判断

<div class="hello" :class="{ 'aaa': isActive, 'ccc': isSort }" />

3.在computed里面判断

     <div class="hello" :class="divStyle"></div>

<script>
export default {
  computed:{
      divStyle(){
        if(this.id===1) {
              return 'aaa'
        }else if(this.id===2){
              return 'ccc'
        }
     }
  },

二.在点击事件里设置改变div的class的属性及相应的操作

    changeWidth(){
      if(this.id===0 || this.id===2){