Vue.js 控制css樣式
阿新 • • 發佈:2017-05-22
bsp script pkg ott bottom cnblogs pre blog span
<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樣式