v-for列表渲染
Posted jinsuo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了v-for列表渲染相关的知识，希望对你有一定的参考价值。
<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染v-for</title> </head> <body> <ul id="box"> <li v-for="item in items"> 可以写成比较像js原生语法：v-for="item of items" {{item.message}} </li> </ul> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:‘#box‘, data:{ items:[ {message:‘foo‘}, {message:‘bar‘} ] } }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染v-for</title> </head> <body> <ul id="box"> <li v-for="(item,index) in items"> {{parentMessage}}-{{index}}-{{item.message}} </li> </ul> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:‘#box‘, data:{ parentMessage: ‘Parent‘, items:[ {message:‘foo‘}, {message:‘bar‘} ] //数组里面包含多个对象 } }) </script> </html> --> <!-- 用v-for来循环对象的属性 --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用v-for来循环对象的属性</title> </head> <body> <ul id="box" class="demo"> <li v-for="value in object" v-bind:style="style"> {{ value }} </li> </ul> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:‘#box‘, data:{ object:{ FirstName:‘John‘, LastName:‘Doe‘, Age:25 //v-for不仅可以用来循环对象集合，也可以用来循环单个对象中的多个属性值； }, style:{ listStyle:‘none‘ } } }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用v-for来循环对象的属性</title> </head> <body> <ul id="box" class="demo"> <li v-for="(value, key, index) in object" v-bind:style="style"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:‘#box‘, data:{ object:{ FirstName:‘John‘, LastName:‘Doe‘, Age:25 }, style:{ listStyle:‘none‘ } } }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用v-for来循环对象的属性</title> </head> <body> <ul id="box" class="demo"> <li v-for="n in 10" v-bind:style="style"> {{ n }} 循环若干次数，并不需要处理循环数据，那么，还是v-for可以胜任。 </li> </ul> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:‘#box‘, data:{ } }) </script> </html> 结果<12345678910--> <!-- push() //在结尾增加一条或多条数据 pop() //删除最后一条数据 shift() //删除第一条数据，并返回这条数据 unshift() //在开始增加一条或多条数据，并返回数组长度 splice() //向/从数组中添加/删除项目，然后返回被删除的项目。 sort() //对数组的元素进行排序。 reverse() //颠倒数组中元素的顺序。 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染v-for</title> </head> <body> <ul id="box"> <li v-for="item in items"> <!-- 可以写成比较像js原生语法：v-for="item of items" --> {{item.message}} </li> </ul> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var obj=new Vue({ el:‘#box‘, data:{ items:[ {message:‘foo‘},s {message:‘bar‘} ], }, vm.items.push({ message: ‘Baz‘ }), }) </script> </html>
以上是关于v-for列表渲染的主要内容，如果未能解决你的问题，请参考以下文章