vue實現(xiàn)動態(tài)列表點擊各行換色的方法
更新時間：2018年09月13日 15:07:19 作者：胖梅
今天小編就為大家分享一篇vue實現(xiàn)動態(tài)列表點擊各行換色的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
只是模擬一練習(xí) v-for v-on v-bind的一個簡單demo
代碼思路：
遍歷出data里面的數(shù)據(jù) v-for
給li加點擊事件
綁定class樣式 怎么控制樣式的顯示
通過 class的控制 v:bind:class={class:index==變量} 下標(biāo)和class變量是否相等控制true false
代碼：
<div id="app">
<ul>
<li v-for='(item,index) in arr' v-bind:class='{bg:index==isactive}'
@click='fn(index)'>{{item}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:'#app',//el element 獲取容器 vue作用的范圍
data:{
isactive:0,
arr:['健康醫(yī)療','生活服務(wù)','信息安全','文化娛樂'],
},
methods:{
fn:function(index){
//點擊切換 變量的值 賦值為 index
console.log(index);
this.isactive=index;
}
}
})
</script>
以上這篇vue實現(xiàn)動態(tài)列表點擊各行換色的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue Element UI使用中遇到的問題，對ElementUI感興趣的同學(xué)，可以參考下2021-05-05
vue+elementUI實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格(可指定合并列)
這篇文章主要介紹了vue+elementUI如何實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格,文中有詳細的代碼實例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue項目設(shè)置打包后的靜態(tài)文件訪問路徑,vue項目的最終項目文件需要經(jīng)過打包輸出,靜態(tài)文件的訪問路徑需要在vue.config.js文件中設(shè)置,本文給大家介紹的非常詳細,需要的朋友可以參考下2024-02-02
詳解swiper在vue中的應(yīng)用(以3.0為例）
這篇文章主要介紹了詳解swiper在vue中的應(yīng)用(以3.0為例），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
VUE中computed 、created 、mounted的先后順序說明
這篇文章主要介紹了VUE中computed 、created 、mounted的先后順序說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue{{}}拼接字符串和換行符方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue基于html2canvas和jspdf?生成pdf?、解決jspdf中文亂碼問題的方法詳解
這篇文章主要介紹了vue基于html2canvas和jspdf?生成pdf?、解決jspdf中文亂碼問題的方法,結(jié)合實例形式詳細描述了中文亂碼問題的原因、解決方法與相關(guān)注意事項,需要的朋友可以參考下2023-06-06
vue中對監(jiān)聽esc事件和退出全屏問題的解決方案
這篇文章主要介紹了vue中對監(jiān)聽esc事件和退出全屏問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue踩坑之backgroundImage路徑問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
keep-alive是Vue提供的一個抽象組件,用來對組件進行緩存,從而節(jié)省性能,下面這篇文章主要給大家介紹了關(guān)于vue?Keep-alive組件緩存的簡單使用,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09