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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步