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ù)大家的！
新聞熱點(diǎn)
疑難解答
