在vue中使用v-bind:class的選項(xiàng)卡方法
更新時(shí)間：2018年09月27日 10:53:57 作者：Lofty_ambition
今天小編就為大家分享一篇在vue中使用v-bind:class的選項(xiàng)卡方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
//vue中的選項(xiàng)卡的實(shí)現(xiàn)，數(shù)據(jù)驅(qū)動dom,因此需要使用數(shù)據(jù)，來改變class；
詳細(xì)見代碼實(shí)現(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實(shí)現(xiàn) 通過改變num實(shí)現(xiàn)進(jìn)而改變active的布爾值 vue中的選項(xiàng)卡的功能 綁定class 綁定布爾值的實(shí)現(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的選項(xiàng)卡方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vuex學(xué)習(xí)之Actions的用法詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了Vue源碼之rollup環(huán)境搭建步驟詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
淺談vue項(xiàng)目用到的mock數(shù)據(jù)接口的兩種方式
這篇文章主要介紹了淺談vue項(xiàng)目用到的mock數(shù)據(jù)接口的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue 動態(tài)添加class,三個(gè)以上的條件做判斷方式
這篇文章主要介紹了vue 動態(tài)添加class,三個(gè)以上的條件做判斷方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了使用vite項(xiàng)目打包資源分配目錄方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
如何使用Vue3+elementPlus的Tree組件實(shí)現(xiàn)一個(gè)拖拽文件夾管理
最近在做一個(gè)文件夾管理的功能，要實(shí)現(xiàn)一個(gè)樹狀的拖拽文件夾面板，里面包含兩種元素，文件夾以及文件，這篇文章主要介紹了使用Vue3+elementPlus的Tree組件實(shí)現(xiàn)一個(gè)拖拽文件夾管理?,需要的朋友可以參考下2023-09-09
Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue項(xiàng)目實(shí)現(xiàn)圖片懶加載的簡單步驟
懶加載的好處在于減少服務(wù)器的壓力,在網(wǎng)絡(luò)比較慢的情況下,可以提前給這張圖片添加一個(gè)占位圖片,提高用戶的體驗(yàn),這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)圖片懶加載的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue中data和props的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來一起學(xué)習(xí)吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了vue-table實(shí)現(xiàn)添加和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05