在vue中,可以通过v-for指令可以将一组数据渲染到页面中,数据可以是数组或者对象。
数据是数组: <ul> <!--i是列表的每一个元素--> <li v-for="book in book_list">{{book.title}}</li> </ul> <ul> <!--i是列表的每一个元素,j是每个元素的下标--> <li v-for="(book, index) in book_list">第{{ index+1}}本图书:{{book.title}}</li> </ul> <script> var vm1 = new Vue({ el:"#app", data:{ book_list:[ {"id":1,"title":"图书名称1","price":200}, {"id":2,"title":"图书名称2","price":200}, {"id":3,"title":"图书名称3","price":200}, {"id":4,"title":"图书名称4","price":200}, ] } }) </script> 数据是对象: <ul> <!--i是每一个value值--> <li v-for="value in book">{{value}}</li> </ul> <ul> <!--i是每一个value值,j是每一个键名--> <li v-for="attr, value in book">{{attr}}:{{value}}</li> </ul> <script> var vm1 = new Vue({ el:"#app", data:{ book: { // "attr":"value" "id":11, "title":"图书名称1", "price":200 }, }, }) </script>
练习: 把上面的数据采用table表格输出到页面,价格大于60的数据需要添加背景色橙色[orange]
<div id="app"> <ul> <!--i是列表的每一个元素,j是每个元素的下标--> <li v-for="(book, index) in goods" :class="{active:book.price>100}">第{{ index + 1}}本图书:{{book.name}}</li> </ul> </div> <script> var vm1 = new Vue({ el: "#app", data: { goods: [ {"name": "python入门", "price": 150}, {"name": "python进阶", "price": 100}, {"name": "python高级", "price": 75}, {"name": "python研究", "price": 60}, {"name": "python放弃", "price": 110}, ] }, }) </script>