1. 程式人生 > >Vue.js 控制css樣式

Vue.js 控制css樣式

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