当前位置：首页 > news >正文

Vue-列表渲染

news 来源：原创 2025/5/31 12:36:08

列表渲染

指令： 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>