首页 > Web开发 > 详细

Vue.js 控制css样式

时间:2017-05-22 19:55:13      阅读:519      评论:0      收藏:0      [点我收藏+]
<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样式

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!