Vue.JS introductory tutorial list rendering
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
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
In-depth discussion of how vite parses .env files
Jan 24, 2023 am 05:30 AM
When using the Vue framework to develop front-end projects, we will deploy multiple environments when deploying. Often the interface domain names called by development, testing and online environments are different. How can we make the distinction? That is using environment variables and patterns.
Detailed graphic explanation of how to integrate the Ace code editor in a Vue project
Apr 24, 2023 am 10:52 AM
Ace is an embeddable code editor written in JavaScript. It matches the functionality and performance of native editors like Sublime, Vim, and TextMate. It can be easily embedded into any web page and JavaScript application. Ace is maintained as the main editor for the Cloud9 IDE and is the successor to the Mozilla Skywriter (Bespin) project.
What is the difference between componentization and modularization in vue
Dec 15, 2022 pm 12:54 PM
The difference between componentization and modularization: Modularization is divided from the perspective of code logic; it facilitates code layered development and ensures that the functions of each functional module are consistent. Componentization is planning from the perspective of UI interface; componentization of the front end facilitates the reuse of UI components.
Explore how to write unit tests in Vue3
Apr 25, 2023 pm 07:41 PM
Vue.js has become a very popular framework in front-end development today. As Vue.js continues to evolve, unit testing is becoming more and more important. Today we’ll explore how to write unit tests in Vue.js 3 and provide some best practices and common problems and solutions.
Let's talk in depth about reactive() in vue3
Jan 06, 2023 pm 09:21 PM
Foreword: In the development of vue3, reactive provides a method to implement responsive data. This is a frequently used API in daily development. In this article, the author will explore its internal operating mechanism.
A simple comparison of JSX syntax and template syntax in Vue (analysis of advantages and disadvantages)
Mar 23, 2023 pm 07:53 PM
In Vue.js, developers can use two different syntaxes to create user interfaces: JSX syntax and template syntax. Both syntaxes have their own advantages and disadvantages. Let’s discuss their differences, advantages and disadvantages.
How to query the current vue version
Dec 19, 2022 pm 04:55 PM
There are two ways to query the current Vue version: 1. In the cmd console, execute the "npm list vue" command to query the version. The output result is the version number information of Vue; 2. Find and open the package.json file in the project and search You can see the version information of vue in the "dependencies" item.
A brief analysis of how to handle exceptions in Vue3 dynamic components
Dec 02, 2022 pm 09:11 PM
How to handle exceptions in Vue3 dynamic components? The following article will talk about Vue3 dynamic component exception handling methods. I hope it will be helpful to everyone!
