Vue学习笔记3.8 列表渲染 v-for
基本的v-for使用方式：
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) of list">
{{item}} ------ {{index}}
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
list: [
'Dell',
'Nice',
'To',
'Meet',
'You'
]
}
})
</script>
</html>要注意的是 不能通过下标直接为列表添加数据
需要用特定函数进行修改：pop(), push(), shift() unshift() splice() sort() reverse()
不过可以先用下标添加。然后最后一个用push追加下就行了
或者用一个新的列表替代掉（就是给list赋一个新的列表 = =）
2. 一般做列表会带上key来区分每个列表循环的值。 Vue不介意用数据本身的下标（index）来做。而是用后台返回来的id值做下标：
<body>
<div id="app">
<div v-for="item of list" :key="item.id">
{{item.text}}
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
list: [
{
id: '0010101010',
text: "hello"
},{
id: '0010101011',
text: "Dell"
},
{
id: '0010101012',
text: "Lee"
},
{
id: '0010101013',
text: "World"
},
]
}
})
</script>3.也可以迭代对象：
<body>
<div id="app">
<div v-for="(item, key, index) of Objects" :key="index">
{{item}}-----{{key}}-----{{index}}
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
Objects: {
name: 'abc',
age: 22,
city: 'xiamen'
}
}
})
</script>这里要注意 不能直接添加对象的键值 只能通过重新指向1个新的对象才可
正确的如下：