<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表对象循环</title>
</head>
<body>
<div id="app">
<div v-for="(item,key,index) of userInfo">
{{item}} -- {{key}} --{{index}}
<!--//item是指循环内容的每一项 key是指关键字 index是指下标-->
</div>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
var vm= new Vue({
el:"#app",
data:{
userInfo:{
name:"dell",
age:"28",
gender:"male",
salary:"secret"
}
}
})
//在div里在添加一项语法 在控制台 vm.list.push({id:"04",text:"sfh"})
//如果这么写vm.list[3] = {id:"04",text:"sth"}，不会渲染出来，在sctocs里会出现代码
</script>
</body>
<html>
<head>
<meta charset="UTF-8">
<title>列表对象循环</title>
</head>
<body>
<div id="app">
<div v-for="(item,key,index) of userInfo">
{{item}} -- {{key}} --{{index}}
<!--//item是指循环内容的每一项 key是指关键字 index是指下标-->
</div>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
var vm= new Vue({
el:"#app",
data:{
userInfo:{
name:"dell",
age:"28",
gender:"male",
salary:"secret"
}
}
})
//在div里在添加一项语法 在控制台 vm.list.push({id:"04",text:"sfh"})
//如果这么写vm.list[3] = {id:"04",text:"sth"}，不会渲染出来，在sctocs里会出现代码
</script>
</body>
</html>
//改变一项的话在控制台输入
//vm.userInfo.name="dell lee"
添加一项的话,在在控制台输入
//vm.userInfo.address="beijgn"
渲染不出来
要渲染出来的话在控制台输入
vm.userInfo ={
name:"dell",
age:"28",
gender:"male",
salary:"secret",
address:"beijgn"
}
另外一种添加循环项是第二种方法是通过Vue.set方法，数据变页面跟着变
//在控制台输入Vue.set(vm.userInfo,"address","beingjing")
通过实例方法添加循环项
vm.$set(vm.userInfo,"address","beijing")
