码迷,mamicode.com
首页 > Web开发 > 详细

Vue.js 控制css样式

时间:2017-05-22 20:01:14      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:function   selected   eth   new   pkg   vue   text   otto   containe   

<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>

 

Vue.js 控制css样式

标签:function   selected   eth   new   pkg   vue   text   otto   containe   

原文地址:http://www.cnblogs.com/longling2344/p/6890991.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!