我现在是这样实现的 但总感觉哪儿不对
<ul v-for="(item,index) in items" v-if="index%2==0">
<li>{{items[index].name}}</li>
<li>{{items[index+1].name}}</li>
</ul>
我现在是这样实现的 但总感觉哪儿不对
<ul v-for="(item,index) in items" v-if="index%2==0">
<li>{{items[index].name}}</li>
<li>{{items[index+1].name}}</li>
</ul>
<ul v-for="(item,index) in items">
<slot v-if="index<items.length&&index%2==0">
<li >{{items[index].name}}</li>
<li v-if="index<items.length-1">{{items[index+1].name}}</li>
</slot>
</ul>
<ul v-for="i in (items.length / 2)">
<li>{{items[(i - 1) * 2].name}}</li>
<li>{{items[(i - 1) * 2 + 1].name}}</li>
</ul>
大概就这么个意思吧,不过有些细节需要你自己稍微再考虑一下,比如说items.length
是奇数的时候怎么办
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<input type="number" v-model.number="count" />
<ol>
<li v-for="g in groups">
<ol>
<li v-for="item in g">{{ item }}</li>
</ol>
</li>
</ol>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
<script>
function GroupByCount(items, count) {
var len = items.length;
var arr = [];
var child = [];
for (var i = 0; i < len; i++) {
child.push(items[i]);
if (child.length === count) {
arr.push(child);
child = [];
}
}
if (child.length > 0) {
arr.push(child);
}
return arr;
}
new Vue({
el: '#app',
data() {
return {
count: 2,
items: []
}
},
created() {
this.items = Array.apply(null, Array(20)).map(function (x, i) { return i; })
},
computed: {
groups() {
return GroupByCount(this.items, this.count)
}
}
})
</script>
</body>
</html>
你的需求具体是什么,看你的代码并不能看出什么
下面是不是你要的东西?
这一个计算属性,把数组拆分成两个数组放入一个数组
itemsComputed (){
let arr = [];
arr.push(this.items.filter((o,i)=>i%2===0));
arr.push(this.items.filter((o,i)=>i%2===1));
return arr;
}
<ul>
<li v-for="item in itemsComputed[0]">
...
</li>
</ul>
<ul>
<li v-for="item in itemsComputed[1]">
...
</li>
</ul>
额?这是为了分组显示吗?
<template>
<ul v-for="(item,idx) in b">
<li v-for="i in item">{{i}}</li>
</ul>
</template>
<script>
export default {
data () {
return {
a: [1, 2, 3, 4, 5]
}
},
computed: {
b () {
const b = []
const a = this.a
for (let i = 0, l = a.length; i < l;) {
b.push([a[i++], a[i++]])
}
return b
}
}
}
</script>
8 回答5.1k 阅读✓ 已解决
6 回答3.3k 阅读✓ 已解决
6 回答4k 阅读✓ 已解决
5 回答3.1k 阅读✓ 已解决
9 回答4.2k 阅读
6 回答2.7k 阅读
5 回答6.7k 阅读✓ 已解决
能直接用模版语法的,就不要做额外计算: