You can use the v-repeat directive to render a list based on an array of objects on a ViewModel. For each object in the array, this directive will create a child Vue instance with that object as its $data object. These child instances inherit the data scope of the parent instance, so within repeated template elements you can access properties of the child instance as well as those of the parent instance. In addition, you can also get the array index corresponding to the current instance through the $index property.
<ul id="demo">
<li v-repeat="items" class="item-{{$index}}">
{{$index}} - {{parentMsg}} {{childMsg}}
</li>
</ul>var demo = new Vue({
el: '#demo',
data: {
parentMsg: 'Hello',
items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]
}
})
Check the effect, it should be easy to get the result
Block-level repetition
Sometimes we may need to repeat a block containing multiple nodes. In this case, we can use the tag to wrap this block. The tag here only plays a semantic wrapping role and will not be rendered by itself. For example:
<ul>
<template v-repeat="list">
<li>{{msg}}</li>
<li class="divider"></li>
</template>
</ul>
Simple value array
Simple value (primitive value) is a string, number, boolean, etc. that is not an object. For arrays containing simple values, you can use $value to access the value directly:
<ul id="tags">
<li v-repeat="tags">
{{$value}}
</li>
</ul>
new Vue({
el: '#tags',
data: {
tags: ['JavaScript', 'MVVM', 'Vue.js']
}
})
Using aliases
Sometimes we may want to more explicitly access a variable in the current scope rather than implicitly falling back to parent scope. You can do this by providing an argument to the v-repeat directive and using it as an alias for the item to be iterated over: Including push(), pop(), shift(), unshift(), splice(), sort() and reverse()) are intercepted, so calling these methods will also automatically trigger a view update.
<ul id="users">
<li v-repeat="user : users">
{{user.name}} - {{user.email}}
</li>
</ul>
var users = new Vue({
el: '#users',
data: {
users: [
{ name: 'Foo Bar', email: 'foo@bar.com' },
{ name: 'John Doh', email: 'john@doh.com' }
]
}
});Extension method
Vue.js adds two convenient methods to the observed array: $set () and $remove().You should avoid setting elements in data-bound arrays directly by index, such as demo.items[0] = {}, because these changes cannot be detected by Vue.js. You should use the extended $set() method:
// 以下操作会触发 DOM 更新
demo.items.unshift({ childMsg: 'Baz' })
demo.items.pop()
$remove() is just syntactic sugar for the splice() method. It will remove the element at the given index. When the argument is not a numeric value, $remove() searches the array for the value and removes the first corresponding element found.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<ul id="tags">
<li v-repeat="tags">
{{$value}}
</li>
</ul>
<input type="button" value="测试" onclick="myClick();">
<script>
var tag = new Vue({
el: '#tags',
data: {
tags: ['标签一', '标签二', '标签三']
}
});
function myClick(){
tag.tags.pop();
}
</script>
</body>
</html>// 不要用 `demo.items[0] = ...`
demo.items.$set(0, { childMsg: 'Changed!'})When you use non-mutating methods, such as filter(), concat() or slice(), the returned array will be a different instance. In this case, you can replace the old array with the new one:
// 删除索引为 0 的元素。 demo.items.$remove(0)
In some cases, you may need to replace the array with a completely new object (such as the object returned by the API call). If each of your data objects has a unique id attribute, then you can use the track-by attribute parameter to give Vue.js a hint so that it can reuse existing Vue instances and DOM nodes with the same id.
For example: your data looks like this
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<ul id="tags">
<li v-repeat="tags">
{{$value}}
</li>
</ul>
<input type="button" value="测试" onclick="myClick();">
<script>
var tag = new Vue({
el: '#tags',
data: {
tags: ['标签一', '标签二', '标签三']
}
});
function myClick(){
//tag.tags.pop();
//tag.tags[0] = '修改后的内容不生效';
tag.tags.$set(0, '修改后的内容生效');
tag.tags.$remove(1);
}
</script>
</body>
</html>
Then you can give a prompt like this:
demo.items = demo.items.filter(function (item) {
return item.childMsg.match(/Hello/)
})
When replacing the items array, if Vue.js encounters a _uid: '88f869d', it will know that it can directly reuse existing instances with the same _uid. Proper use of track-by can greatly improve performance when re-rendering large v-repeat lists with fresh data.
Traverse objects
You can also use v-repeat to traverse all properties of an object. Each duplicate instance will have a special attribute $key. For simple values, you can also use the $value property just like accessing simple values in an array.{
items: [
{ _uid: '88f869d', ... },
{ _uid: '7496c10', ... }
]
}<div v-repeat="items" track-by="_uid"> <!-- content --> </div>
Iteration range
<ul id="repeat-object">
<li v-repeat="primitiveValues">{{$key}} : {{$value}}</li>
<li>===</li>
<li v-repeat="objectValues">{{$key}} : {{msg}}</li>
</ul>new Vue({
el: '#repeat-object',
data: {
primitiveValues: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
},
objectValues: {
one: {
msg: 'Hello'
},
two: {
msg: 'Bye'
}
}
}
}); Sometimes we just need to display a filtered or sorted version of an array without actually changing or resetting the original data. Vue provides two built-in filters to simplify such needs: filterBy and orderBy.
<div id="range">
<div v-repeat="val">Hi! {{$index}}</div>
</div>The above is the entire content of this article, I hope it will be helpful to everyone’s study
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
