Vue 列表渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./vue.v2.6.10.dev.js"></script>
</head>
<body>
<div id="app">
<div v-for="item of list">{{item}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
"木子才",
"普特斯",
"圣华尔",
"凯佩玉玲",
"信守切妮",
"伽罗敏",
],
},
methods: {
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./vue.v2.6.10.dev.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) of list">{{item}} ----- {{index}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
"木子才",
"普特斯",
"圣华尔",
"凯佩玉玲",
"信守切妮",
"伽罗敏",
],
},
methods: {
}
})
</script>
</body>
</html>
key值可以提高性能。
添加 key值：（不建议用 index 作为 key 值）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./vue.v2.6.10.dev.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) of list" :key="index">{{item}} ----- {{index}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
"木子才",
"普特斯",
"圣华尔",
"凯佩玉玲",
"信守切妮",
"伽罗敏",
],
},
methods: {
}
})
</script>
</body>
</html>
推荐使用 数据的唯一标识值来做 key 值:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./vue.v2.6.10.dev.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) of list" :key="item.id">{{item.text}} ----- {{index}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [{
id: '0001',
text: "木子才",
},{
id: '0002',
text: "普特斯",
},{
id: '0003',
text: "圣华尔",
},{
id: '0004',
text: "凯佩玉玲",
},{
id: '0005',
text: "信守切妮",
},{
id: '0006',
text: "伽罗敏",
},],
},
methods: {
}
})
</script>
</body>
</html>
Vue提供了7个方法来操作数组，不能直接通过下标来操作，不然有些事件不能触发：数据变了，但页面不会跟着变。
pop
splice
push
shift
unshift
sort
reverse
vm.list.splice(1, 1, {id:"3333", text:"33333"})
从数组 下标1，删除1个，添加一个对象。
改变数据的引用也可以改变数据，页面也会跟着变。
template 标签可以包裹内容，而不会被渲染出来。
对象循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./vue.v2.6.10.dev.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, key, index) of userInfo">{{item}} ----- {{key}} ----- {{index}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
userInfo: {
name: 'Muzico',
age: 18,
gender: "male",
}
},
methods: {
}
})
</script>
</body>
</html>
通过Vue.set(vm.userInfo, "address", "foshan") 也可以添加数据，页面也跟着变。
或者vm.$set(vm.userInfo, "phone", "18666")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./vue.v2.6.10.dev.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) of list">{{item}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1,2,3,4]
},
methods: {
}
})
</script>
</body>
</html>
改变数组：
Vue.set(vm.list, 1, 5)
或 vm.$set(vm.list, 1, 5)
（对象，下标，内容）