<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue中的列表渲染</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="app"><template v-for="(item,index) of list":key="item.id"><div>{{item.text}}---{{index}}</div><span>{{item.text}}</span></template>
</div><script>/*创建了一个vue实例*/var vm = new Vue({el: '#app',data: {list: [{id: "00001",text: "welcome"}, {id: "00002",text: "to"}, {id: "00003",text: "gblfy.com"}]}});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue中的列表渲染</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="app"><div v-for="(item,key,index) of userInfo":key="item.id">{{item}}--{{key}}--{{index}}</div>
</div><script>/*创建了一个vue实例*/var vm = new Vue({el: '#app',data: {userInfo: {name: "ly",age: 22,gender: "male",salary: "secret"}}});
</script>
</body>
</html>
利用api添加数据或者改变对象或者数组的引用