Vue中的列表渲染
<!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添加數據或者改變對象或者數組的引用
總結
- 上一篇： 1273 - Unknown colla
- 下一篇： Vue项目 全局定义日期时间方法处理