我要完成一项任务，我将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>
答案 0 :(得分：2)
这是我在评论中写的内容的简短描述。
基本机制是“计算”部分，该部分更新对相应变量所做的更改（粗略描述）。您可以通过查看here
来获得更好的描述
new Vue({
el: "#app",
data: {
products: [
{
name: "a",
category: "a",
price: "82.75"
},
{
name: "b",
category: "a",
price: "82.75"
},
{
name: "c",
category: "a",
price: "82.75"
},
{
name: "d",
category: "a",
price: "82.75"
},
{
name: "e",
category: "a",
price: "82.75"
},
{
name: "f",
category: "a",
price: "82.75"
},
{
name: "g",
category: "a",
price: "82.75"
},
{
name: "h",
category: "a",
price: "82.75"
},
{
name: "i",
category: "a",
price: "82.75"
},
{
name: "j",
category: "a",
price: "82.75"
},
{
name: "k",
category: "a",
price: "82.75"
},
{
name: "l",
category: "a",
price: "82.75"
},
{
name: "m",
category: "a",
price: "82.75"
},
{
name: "n",
category: "a",
price: "82.75"
},
{
name: "o",
category: "a",
price: "82.75"
},
{
name: "p",
category: "a",
price: "82.75"
},
],
currentPage: 1,
},
computed:{
toBeShown() {
return this.products.slice(0, this.currentPage * 4);
},
totalPages() {
return Math.ceil( this.products.length / 4);
}
},
methods: {
nextPage(){
if(this.currentPage < this.totalPages) this.currentPage++;
},
prevPage(){
this.currentPage = this.currentPage - 1 || 1;
}
}
})body{
padding:5px;
}
.row{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
.row .col{
box-sizing:border-box;
flex:0 0 calc(25% - 4px);
border:1px solid lightgrey;
box-shadow:0 0 3px rgba(0,0,0,0.1);
margin: 0 1px;
padding:8px 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="row">
<h3>Products</h3>
<div>
<button @click="prevPage" :disabled="currentPage==1">Show Less</button>
<button @click="nextPage" :disabled="currentPage == totalPages">Show More</button>
</div>
</div>
<div class="row">
<div class="col" v-for="(product,pIndex) in toBeShown" :key="pIndex">
<h3>{{product.name}} <small>{{product.category}}</small></h3>
<p>${{product.price}}</p>
</div>
</div>
</div>
答案 1 :(得分：2)
如@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>