使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
v-for可以把數(shù)據(jù)中的一個數(shù)組對應(yīng)為一組元素
v-for 指令需要以 item in items 形式的特殊語法, items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。
- 實(shí)現(xiàn)效果如圖

需求描述:
第一個顯示藍(lán)色按鈕,代表數(shù)據(jù)最終狀態(tài);其余按鈕為灰色,顯示數(shù)據(jù)流轉(zhuǎn)記錄。
返回的數(shù)據(jù)類型

前端頁面代碼
<div class="leftProcessBox">
<div class="leftProcess" v-for="(listLZPar,index) in listLZParams" v-show="listLZPar.operate_type!=''">
<div class="process">
<div class="processPointLine">
<div class="processPoint">
<i class="ico iconfont icon-circleyuanquan iconCircle " v-show="index==0"></i>
<i class="ico iconfont icon-yuan iconCircle" v-show="index!=0"></i>
<div class="characterInfo">{{listLZPar.operate_type | operatertypeToName}}</div>
</div>
<div class="processLine" v-show="!(index == listLZParams.length-1)">
</div>
</div>
</div>
</div>
</div>
PS:vue里面如何讓v-for循環(huán)出來的列表里面的列表click事件只對當(dāng)前列表有效
<li @click="show"> <span>1</span> </li> <li @click="show"> <span>1</span> </li> <li @click="show"> <span>1</span> </li>
li點(diǎn)擊只讓當(dāng)前的 li 下面的span 隱藏
方法一:用vue就盡量遵從數(shù)據(jù)驅(qū)動的想法,實(shí)現(xiàn)這個的方法很多,但是盡量不要直接去操作dom。
<div id="app">
<ul>
<li v-for="list in lists" @click="show($index)">
<span v-show="$index !== i">{{ list }}</span>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
lists: [1, 1, 1],
i: -1
},
methods: {
show (index) {
this.i = index
}
}
})
</script>
方法2:
<ul id="app">
<li v-for='item in items' @click="toggle(item)">
<span v-if='item.show'>{{item.content}}</span>
</li>
</ul>
new Vue({
el: '#app',
data: function() {
return {
items: [{
content: '1 item',
show: true
}, {
content: '2 item',
show: true
}, {
content: '3 item',
show: true
}]
}
},
methods: {
toggle: function(item) {
item.show = !item.show;
}
}
})
總結(jié)
以上所述是小編給大家介紹的使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
- 解決vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題
- vue-video-player 通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果【推薦】
- Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解
- vue實(shí)現(xiàn)動態(tài)按鈕功能
- vue 表單之通過v-model綁定單選按鈕radio
- Vue實(shí)現(xiàn)按鈕級權(quán)限方案
- vue.js 實(shí)現(xiàn)點(diǎn)擊按鈕動態(tài)添加li的方法
- 詳解VUE前端按鈕權(quán)限控制
- vue點(diǎn)擊按鈕動態(tài)創(chuàng)建與刪除組件功能
- Vue.js實(shí)現(xiàn)按鈕的動態(tài)綁定效果及實(shí)現(xiàn)代碼
- vue+elementUI實(shí)現(xiàn)點(diǎn)擊按鈕互斥效果
相關(guān)文章
vue.js綁定事件監(jiān)聽器示例【基于v-on事件綁定】
這篇文章主要介紹了vue.js綁定事件監(jiān)聽器的方法,結(jié)合實(shí)例形式分析了vue.js基于v-on事件綁定響應(yīng)鼠標(biāo)點(diǎn)擊相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
Vue3?使用v-md-editor如何動態(tài)上傳圖片的方法實(shí)現(xiàn)
本文主要介紹了Vue3?使用v-md-editor如何動態(tài)上傳圖片,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
解決VUE-npm ERR! C:\rj\node-v14.4.0-win-x64\nod問題
這篇文章主要介紹了解決VUE-npm ERR! C:\rj\node-v14.4.0-win-x64\nod問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
vue-cli的index.html中使用環(huán)境變量方式
這篇文章主要介紹了vue-cli的index.html中使用環(huán)境變量方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
vue-cli3.0 axios跨域請求代理配置方式及端口修改
這篇文章主要介紹了vue-cli3.0 axios跨域請求代理配置方式及端口修改,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue自定義實(shí)例化modal彈窗功能的實(shí)現(xiàn)
這篇文章主要介紹了vue自定義實(shí)例化modal彈窗,Vue.extend 屬于Vue的全局 api,在實(shí)際業(yè)務(wù)開發(fā)中我們很少使用,因?yàn)橄啾瘸S玫?nbsp;Vue.component寫法使用 extend 步驟要更加繁瑣一些,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下2022-09-09

