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>Copy after login
var demo = new Vue({
el: '#demo',
data: {
parentMsg: 'Hello',
items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]
}
})Copy after login
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>Copy after login
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>Copy after login
new Vue({
el: '#tags',
data: {
tags: ['JavaScript', 'MVVM', 'Vue.js']
}
})Copy after login
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>Copy after login
The following is a demonstration example, the data item will be removed when the button is clicked
var users = new Vue({
el: '#users',
data: {
users: [
{ name: 'Foo Bar', email: 'foo@bar.com' },
{ name: 'John Doh', email: 'john@doh.com' }
]
}
});Copy after login
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()Copy after login
$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>Copy after login
// 不要用 `demo.items[0] = ...`
demo.items.$set(0, { childMsg: 'Changed!'})Copy after login
Replace Array
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)
Copy after login
You might think that this will cause the entire list's DOM to be destroyed and re-rendered. But don't worry, Vue.js can recognize whether an array element has an associated Vue instance and reuse it as efficiently as possible.
Use track-by (track-by attribute in vue)
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>Copy after login
Then you can give a prompt like this:
demo.items = demo.items.filter(function (item) {
return item.childMsg.match(/Hello/)
})Copy after login
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', ... }
]
}Copy after login
<div v-repeat="items" track-by="_uid">
<!-- content -->
</div>
Copy after login
In ECMAScript 5, there is no mechanism to detect when a new property is added to an object or a property is removed from an object. To address this problem, three extension methods will be added to the observed object in Vue.js: $add(key, value), $set(key, value) and $delete(key). These methods can be used to trigger corresponding view updates when properties of the observed object are added/removed. The difference between the methods $add and $set is that $add will return early when the specified key already exists in the object, so calling obj.$add(key) will not overwrite the existing value with undefined.
Iteration range
v-repeat can also accept an integer. In this case it will display a template multiple times. The example below will iterate 3 times.
<ul id="repeat-object">
<li v-repeat="primitiveValues">{{$key}} : {{$value}}</li>
<li>===</li>
<li v-repeat="objectValues">{{$key}} : {{msg}}</li>
</ul>Copy after login
new Vue({
el: '#repeat-object',
data: {
primitiveValues: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
},
objectValues: {
one: {
msg: 'Hello'
},
two: {
msg: 'Bye'
}
}
}
});Copy after login
Array Filter
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>Copy after login
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)
