Loading

Vue.js 控制css样式

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style type="text/css">
    .blue{
        
    background-color: blue;     
    }
    .green{
         
    background-color: green;     
    }
    div{
        width: 400px;
        height: 200px;
        border-bottom-width: 2px;
    }
</style>

 
    <div id="container">
         
         <div v-for="item in someData" class="blue" v-bind:class="{'green': item.selected }" @click="green(item)">
         点我
    </div>
    </div>
 

<script>

var vm = new Vue({
  el: '#container',
 data: {
  someData: [{"id":1,selected:true},{"id":2,selected:false},{"id":3,selected:true}]

},
methods:{
    green:function(item){
        item.selected=!item.selected;
    }
}

})

</script>

 

posted @ 2017-05-22 19:25  yaro-feng  阅读(4859)  评论(0编辑  收藏  举报