请陛下批阅
v-for:遍历普通数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历普通数组</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="(val,index) in list">索引:{{index}} --- 值:{{val}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1,2,3,4,5]
}
});
</script>
</html>
v-for:遍历对象数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历对象数组</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="(val,index) in list">索引:{{index}} --- id:{{val.id}} ---- name:{{val.name}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
{id: 1, name: 'ls1'},
{id: 2, name: 'ls2'},
{id: 3, name: 'ls3'},
{id: 4, name: 'ls4'}
]
}
});
</script>
</html>
v-for:遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历对象</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="(val,key,index) in user">索引:{{index}} --- 键:{{key}} --- 值:{{val}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: '我是你的baba',
gender: 'male'
}
}
});
</script>
</html>
v-for:迭代数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>迭代数字</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="(val,index) in 10">索引:{{index}} --- 第{{val}}次循环</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
});
</script>
</html>
v-for中key的重要性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>key的重要性</title>
<script src="../../vue/vue.js"></script>
</head>
<body>
<div id="app">
<label>id:
<input v-model="id">
</label>
<label>name:
<input v-model="name">
</label>
<input type="button" value="添加" @click="add">
<p v-for="item in list" :key="item.id">
<input type="checkbox">id: {{item.id}} --- name: {{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{id: 1, name: 'ls1'},
{id: 2, name: 'ls2'},
{id: 3, name: 'ls3'},
{id: 4, name: 'ls4'}
]
},
methods: {
add() {
this.list.unshift({id: this.id, name: this.name})
}
}
});
</script>
</body>
</html>
