vue2.0细节剖析

1.样式切换

单个切换样式

/*html部分*/
<div class="bg" v-bind:class="{active:isActive}"></div>
<button v-on:click="toggle">切换</button>
/*样式部分*/
.bg{
  width:300px;
  height:200px;
  background: #f6f6f6;
}
.bg.active{
  background:#ddd;
}
/*vue部分*/
export default {
  components:{todoItem},
  data () {
    return {
      isActive:true
    }
  },
  methods:{
    toggle(){
      this.isActive=!this.isActive;
    }
  }
}

列表切换样式

/*html部分*/
<ul>
    <li v-for="(item,index) in menu" :class="{on:flag==index}" @click="light(index)">{{item.name}}</li>
</ul>
/*样式部分*/
.on{
  color:red;
}
/*vue部分*/
export default {
  data () {
    return {
      menu:[
          {'name':'语文'},
          {'name':'数学'},
          {'name':'自然'},
          {'name':'社会'},
          {'name':'和谐'}
      ],
      flag:0
    }
  },
  methods:{
       light(index){
         this.flag=index;
      }
  }
}     
效果图