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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM