在vue中使用v-bind:class的選項卡方法
更新時間：2018年09月27日 10:53:57 作者：Lofty_ambition
今天小編就為大家分享一篇在vue中使用v-bind:class的選項卡方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
//vue中的選項卡的實現(xiàn)，數(shù)據(jù)驅(qū)動dom,因此需要使用數(shù)據(jù)，來改變class；
詳細(xì)見代碼實現(xiàn)
<style>
ul{overflow: hidden;}
ul li{float: left;width: 150px;height: 35px;line-height: 35px;border: 1px solid red;list-style: none;cursor: pointer;}
ul li.active{background-color: yellow}
</style>
<div id="app">
<ul><li v-for="(item,index) in items" @click="setColor(index)" :key="item.message" :class="{active:index == num}">{{item.message}}
</li>
</ul>
</div>
<script>
// 使用v-bind:class實現(xiàn) 通過改變num實現(xiàn)進(jìn)而改變active的布爾值 vue中的選項卡的功能 綁定class 綁定布爾值的實現(xiàn)
var vm = new Vue({
el:"#app",
data(){
return {
items: [
{ message: 'Foo' },
{ message: 'Bar' },
{ message: 'Jack' }
],num:0
}
},
methods:{
setColor(index){
this.num = index
}
}
})
</script>
以上這篇在vue中使用v-bind:class的選項卡方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了如何解決vue與傳統(tǒng)jquery插件沖突，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue前端實現(xiàn)下載文件功能,本文給大家介紹多種方式,感興趣的朋友跟隨小編一起看看吧2024-10-10
這篇文章主要介紹了vue如何在線預(yù)覽各類型文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue-router中的鉤子函數(shù)和執(zhí)行順序說明
這篇文章主要介紹了vue-router中的鉤子函數(shù)和執(zhí)行順序說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
3分鐘搞定vite項目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用
這篇文章主要介紹了3分鐘搞定vite項目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02
這篇文章主要介紹了vue3使用mqtt的實例代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
作為使用Vue已經(jīng)很多年的人，特別是去年一直在使用?Vue3，因此，學(xué)到了很多東西。所以本文為大家準(zhǔn)備了7個讓我們成為更好?Vue?開發(fā)者的技巧，需要的可以參考一下2022-06-06
這篇文章主要介紹了解決vant框架做H5時踩過的坑(下拉刷新、上拉加載等)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue-cli3全面配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11