使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
v-for可以把數(shù)據(jù)中的一個(gè)數(shù)組對(duì)應(yīng)為一組元素
v-for 指令需要以 item in items 形式的特殊語法, items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。
- 實(shí)現(xiàn)效果如圖
需求描述:
第一個(gè)顯示藍(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事件只對(duì)當(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ū)動(dòng)的想法,實(shí)現(xiàn)這個(gè)的方法很多,但是盡量不要直接去操作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)列表控制按鈕隱藏顯示功能,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
- 解決vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題
- vue-video-player 通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果【推薦】
- Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解
- vue實(shí)現(xiàn)動(dòng)態(tài)按鈕功能
- vue 表單之通過v-model綁定單選按鈕radio
- Vue實(shí)現(xiàn)按鈕級(jí)權(quán)限方案
- vue.js 實(shí)現(xiàn)點(diǎn)擊按鈕動(dòng)態(tài)添加li的方法
- 詳解VUE前端按鈕權(quán)限控制
- vue點(diǎn)擊按鈕動(dòng)態(tài)創(chuàng)建與刪除組件功能
- Vue.js實(shí)現(xiàn)按鈕的動(dòng)態(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-07Vue3?使用v-md-editor如何動(dòng)態(tài)上傳圖片的方法實(shí)現(xiàn)
本文主要介紹了Vue3?使用v-md-editor如何動(dòng)態(tài)上傳圖片,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(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問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04vue-cli的index.html中使用環(huán)境變量方式
這篇文章主要介紹了vue-cli的index.html中使用環(huán)境變量方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue-cli3.0 axios跨域請(qǐng)求代理配置方式及端口修改
這篇文章主要介紹了vue-cli3.0 axios跨域請(qǐng)求代理配置方式及端口修改,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue自定義實(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