Vue of instructions v-forand keyproperties
1. Iterate the array
<ul>
<li v-for="(item, i) in list">索引：{
{
i}} --- 姓名：{
{
item.name}} --- 年龄：{
{
item.age}}</li>
</ul>
2. Iterate the attributes in the object
<!-- 循环遍历对象身上的属性 -->
<div v-for="(val, key, i) in userInfo">{
{
val}} --- {
{
key}} --- {
{
i}}</div>
3. Iterative numbers
<p v-for="i in 10">这是第 {
{
i}} 个P标签</p>
4. Loop ordinary array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- <p>{
{
list[0]}}</p>
<p>{
{
list[1]}}</p>
<p>{
{
list[2]}}</p>
<p>{
{
list[3]}}</p>
<p>{
{
list[4]}}</p> -->
<p v-for="(item, i) in list">索引值：{
{
i}} --- 每一项：{
{
item}}</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6]
},
methods: {
}
});
</script>
</body>
</html>
5. Loop the object array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-for="(user, i) in list">Id：{
{
user.id }} --- 名字：{
{
user.name }} --- 索引：{
{
i}}</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [
{
id: 1, name: 'zs1' },
{
id: 2, name: 'zs2' },
{
id: 3, name: 'zs3' },
{
id: 4, name: 'zs4' }
]
},
methods: {
}
});
</script>
</body>
</html>
6. Loop Object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 -->
<p v-for="(val, key, i) in user">值是： {
{
val }} --- 键是： {
{
key}} -- 索引： {
{
i}}</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: '托尼·颗',
gender: '男'
}
},
methods: {
}
});
</script>
</body>
</html>
7. Iterate numbers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 -->
<!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
<p v-for="count in 10">这是第 {
{
count }} 次循环</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
});
</script>
</body>
</html>
In version 2.2.0+, when using v-for in components, the key is now required.
When Vue.js uses v-for to update the list of rendered elements, it uses the " in-place reuse " strategy by default . If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but simply reuse each element here and ensure that it displays each element that has been rendered under a specific index.
In order to give Vue a hint so that it can track the identity of each node, thereby reusing and reordering existing elements, you need to provide a unique key attribute for each item.
Complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
<!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
<!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{
{
item.id}} --- {
{
item.name}}
</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{
id: 1, name: '李斯' },
{
id: 2, name: '嬴政' },
{
id: 3, name: '赵高' },
{
id: 4, name: '韩非' },
{
id: 5, name: '荀子' }
]
},
methods: {
add() {
// 添加方法
this.list.unshift({
id: this.id, name: this.name })
}
}
});
</script>
</body>
</html>
If you don't use key
After adding a new element, check the corresponding index number, and a bug will appear
But if you use the key, there will be no such bugs, the same as Xunzi