溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
功能如下：
這里就需要一開始只顯示6個數據，點擊展開才顯示全部
HTML里調用showdetailList：
<div>
<p v-for="(item, index) in showdetailList">
<span>{{item.title}}</span>
<span>{{item.name}}</span>
</p>
</div>
<div v-if="detailList.length > 6" v-on:click="changeFoldState">
<span>{{brandFold?'展開':'收起'}}</span>
</div>
data數據：
data() {
return {
brandFold: true
}
}
moke一個數據：
mocData() {
var items = ['Dr.Ci:Labo城野醫生', '日本', '控油 收斂毛孔', '任何膚質', '面部', '化妝水', '任何膚質', '面部', '化妝水']
var lists = ['商品品牌', '品牌國', '功能', '適合膚質', '適用部位', '產品類型', '商品品牌', '品牌國', '功能']
for (var i = 0; i < items.length; i++) {
let item = {title: lists[i], name: items[i]}
this.detailList.push(item)
}
console.log(this.detailList)
}
使用computed屬性：
set方法里的val值就是get方法返回的值
computed: {
showdetailList: {
get: function () {
if (this.brandFold) {
if (this.detailList.length < 7) {
return this.detailList
}
let newArr = []
for (var i = 0; i < 6; i++) {
let item = this.detailList[i]
newArr.push(item)
}
return newArr
}
return this.detailList
},
set: function (val) {
this.showdetailList = val
}
}
}
changeFoldState方法：
changeFoldState() {
this.brandFold = !this.brandFold
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
