外贸电商网站开发益阳在线官网
列表渲染
- 指令：
v-for - 语法：
v-for="(item,index) in list" :key="index" :key: 强烈建议使用数据中唯一标识，避免数据乱序后渲染差错问题
数组
- 数据
persons:[{id:'001',name:'刘德华',age:18},{id:'002',name:'张学友',age:18},{id:'003',name:'郭富城',age:18},{id:'004',name:'黎明',age:18}
]
- 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>列表渲染</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base{padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>列表渲染</h1><div><h2>数组</h2><ul><!-- :key="item.id" :key="index" --><li v-for="(item,index) in persons" :key="item.id">{{index}}-{{item.id}}-{{item.name}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",persons:[{id:'001',name:'刘德华',age:18},{id:'002',name:'张学友',age:18},{id:'003',name:'郭富城',age:18},{id:'004',name:'黎明',age:18}],},methods:{},});</script>
</html>- 效果
对象
- 数据
girl:{name:"ALice",age:28}
- 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>列表渲染</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base{padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>列表渲染</h1><div><h2>数组</h2><ul><!-- :key="item.id" :key="index" --><li v-for="(item,index) in persons" :key="item.id">{{index}}-{{item.id}}-{{item.name}}</li></ul><h2>对象</h2><ul><!-- :key="k" :key="index" --><li v-for="(v,k,index) in girl" :key="index">{{index}}-{{k}}-{{v}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",persons:[{id:'001',name:'刘德华',age:18},{id:'002',name:'张学友',age:18},{id:'003',name:'郭富城',age:18},{id:'004',name:'黎明',age:18}],girl:{name:"ALice",age:28},},methods:{},});</script>
</html>- 效果
字符串
- 数据
str:"vue"
- 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>列表渲染</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base{padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>列表渲染</h1><div><h2>数组</h2><ul><!-- :key="item.id" :key="index" --><li v-for="(item,index) in persons" :key="item.id">{{index}}-{{item.id}}-{{item.name}}</li></ul><h2>对象</h2><ul><!-- :key="k" :key="index" --><li v-for="(v,k,index) in girl" :key="index">{{index}}-{{k}}-{{v}}</li></ul><h2>字符串</h2><ul><li v-for="(c,index) in str" :key="index">{{index}}-{{c}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",persons:[{id:'001',name:'刘德华',age:18},{id:'002',name:'张学友',age:18},{id:'003',name:'郭富城',age:18},{id:'004',name:'黎明',age:18}],girl:{name:"ALice",age:28},str:"vue"},methods:{},});</script>
</html>- 效果
指定数字
-
数据
指定数字5 -
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>列表渲染</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base{padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>列表渲染</h1><div><h2>数组</h2><ul><!-- :key="item.id" :key="index" --><li v-for="(item,index) in persons" :key="item.id">{{index}}-{{item.id}}-{{item.name}}</li></ul><h2>对象</h2><ul><!-- :key="k" :key="index" --><li v-for="(v,k,index) in girl" :key="index">{{index}}-{{k}}-{{v}}</li></ul><h2>字符串</h2><ul><li v-for="(c,index) in str" :key="index">{{index}}-{{c}}</li></ul><h2>数字</h2><ul><li v-for="(number,index) in 5" :key="index">{{index}}-{{number}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",persons:[{id:'001',name:'刘德华',age:18},{id:'002',name:'张学友',age:18},{id:'003',name:'郭富城',age:18},{id:'004',name:'黎明',age:18}],girl:{name:"ALice",age:28},str:"vue"},methods:{},});</script>
</html>- 效果
