我想完成一个任务，我有 12 个项目，每列 4 个项目，最初前四个项目是可见的，其他的是隐藏的，直到我们单击“显示更多”按钮，出现一行四个列，然后再次按下按钮，其他 4 个项目是可见的。然后我们有更少的按钮，点击它的第二行和第三行是隐藏的，只有第一行是可见的。
const vm = new Vue({
el: '#app',
data() {
return {
limitationList: 5,
products: {
{
name: "a",
category: "a",
price: "82.75"
},
{
name: "a",
category: "2",
price: "82.75"
},
{
name: "a",
category: "3",
price: "82.75"
},
{
name: "a",
category: "4",
price: "82.75"
},
{
name: "a",
category: "5",
price: "82.75"
},
{
name: "a",
category: "6",
price: "82.75"
},
{
name: "a",
category: "7",
price: "82.75"
},
{
name: "a",
category: "8",
price: "82.75"
},
{
name: "a",
category: "9",
price: "82.75"
},
{
name: "a",
category: "10",
price: "82.75"
},
{
name: "a",
category: "11",
price: "82.75"
},
{
name: "a",
category: "12",
price: "82.75"
},
}
}
},
methods: {
updateLimitation(limitationList) {
if (this.limitationList == this.product.length) {
this.limitationList = 5
} else {
this.limitationList = this.product.length
}
}
}
});<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6 md3 lg3 xl3 mb-3 v-for="product in products" :key="product.id" v-if="product && product.length > 0 && index <= limitationList">
<div class="pa-4">
<div class="pt-3">
<p class="mb-0">
<a href="javascript:void(0)">{{product.category}}</a>
</p>
<h5><a href="javascript:void(0)"> {{product.name}}</a></h5>
<div fxLayoutAlign="space-between">
<p class="accent-color">
{{product.price}}</p>
</div>
</div>
</div>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
</body>
</html>最佳答案
正如@Jhecht 所提到的，使用 slice 并将您的项目分组到列中将允许您实现此目的:
new Vue({
el: '#app',
data() {
return {
items: [],
visible: 1
}
},
beforeMount() {
const max = Math.ceil(Math.random() * 10) + 20
this.items = Array.from(Array(max), (x, i) => `Item ${i + 1}`)
},
computed: {
columns() {
let columns = []
for (i = 0; i < this.visible; i++) {
columns.push(this.items.slice(i * 4, (i * 4) + 4))
}
return columns
}
}
})* {
padding: 0;
margin: 0;
}
button {
font-size: 1.25rem;
padding: .25rem;
}
#container {
display: flex;
flex-direction: column;
}
#container > div {
display: inline-flex;
flex-direction: row;
justify-content: space-between;
border: 1px dashed grey;
padding: .25rem;
margin: .25rem;
}
#container > div > div {
display: flex;
flex-grow: 1;
border: 1px solid black;
margin: .25rem;
padding: .25rem;
}<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<button @click="visible = visible > 1 ? visible - 1 : visible" :disabled="visible < 2">Less</button>
<button @click="visible = visible * 4 >= items.length ? visible : visible + 1" :disabled="visible * 4 >= items.length">More</button>
<div id="container">
<div v-for="(column, index) in columns" :key="index">
<div v-for="item in column" :key="item">{{ item }}</div>
</div>
</div>
</div>关于html - 使用 Vuejs 显示更多更少，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54001543/