<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--为了提高div循环显示的性能，最好给每一项添加一个唯一的key值,但是不建议用index,因为频繁操作每一项会耗性能，vue无法充分使用dom节点-->
<!--把:key="index"改为:key="item.id",来确保每一项的id-->
<div v-for="(item,index) of list"
:key="item.id">
{{item.text}} + {{index}}
</div>
<!--item是列表项的每一项的内容-->
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
var vm= new Vue({
el:"#app",
data:{
list:[
// 后端的数据传送到前端的时候会携带一个唯一的id
{
id:"01",
text:"hello"
},
{
id:"02",
text:"w"
},
{
id:"03",
text:"j"
}
]
}
})
在div里在添加一项语法 在控制台 vm.list.push({id:"04",text:"sfh"})
</script>
</body>
</html>
//在div里在添加一项语法 在控制台 vm.list.push({id:"04",text:"sfh"})
//如果这么写vm.list[3] = {id:"04",text:"sth"}，不会渲染出来，在sctocs里会出现代码
这些方法是///这些方法是push pop shift unshift splice sort reverse
vm.list.splice(1,1,{id:"2",text:"wt"},{id:"3",text:"wt3"}) 第一个参数是改变从第几项开始改变，第二个参数是删除几条，第三个参数是添加的内容
//第二种方法是改变s数据的引用地址，在控制台数入
//vm.list=[
//// 后端的数据传送到前端的时候会携带一个唯一的id
// {
// id:"01",
// text:"hello"
// },
// {
// id:"02",
// text:"w3"
// },
// {
// id:"03",
// text:"j"
// }
// ]，发现页面w变为w3
不仅要循环div还要循环一个span标签
<!--为了提高div循环显示的性能，最好给每一项添加一个唯一的key值,但是不建议用index,因为频繁操作每一项会耗性能，vue无法充分使用dom节点-->
<!--把:key="index"改为:key="item.id",来确保每一项的id-->
<div v-for="(item,index) of list"
:key="item.id">
{{item.text}} + {{index}}
</div>
<span v-for="(item,index) of list"
:key="item.id">{{item.text}}
</span>
<!--item是列表项的每一项的内容-->
</div>
<div v-for="(item,index) of list"
:key="item.id">
<div >
{{item.text}} + {{inde
</div>
<span>
{{item.text}}
</span>
</div>
这样写的话，在代码里会出现div多了一层，把div换成template就可以了，template可以包裹元素，而不会把template宣传染出来
