循环渲染指令

在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>