初學Vue筆記——選項卡切換功能
阿新 • • 發佈:2019-02-07
在沒有學習Vue之前,想要做一個Tabs切換功能,首先想到的當然是通過DOM操作改變元素的class。然而Vue操作的是資料,雖然在方法中可以隨心所欲得寫原生js程式碼來操作DOM,但這會非常彆扭。初學者使用Vue的時候一定要切換一下思維。
<style> li{ list-style-type: none; display: inline-block; margin-right: 0.5rem; } .normal{ color: green; } .active{ color: red; } </style> <ul id="myTab"> <li class="normal" v-for="(item,index) in items" :key="item.id" :class="{'active':isActive==index}" @click="change(index)"> {{item}} </li> </ul> </body> <script> new Vue({ el: "#myTab", data: { items: [ 'item1', 'item2', 'item3' ], isActive: 0 //索引值預設為0,即item1為預設啟用的選項卡 }, methods: { change: function (index) { this.isActive = index; } } }) </script>
思路非常簡單,就是通過點選改變isActive的值使之與當前元素的索引index值相等,以此改變布林值來控制class的切換