循环结构

Posted 2020-11-27 alisa-k

循环结构

　　v-for遍历数组

<div :key="index" v-for="(item,index) in fruit">{{item}}</div>

<script src="../js/vue.js"></script>
<script>
　　var vm = new Vue({
　　　　el: ‘#app‘,
　　　　data: {
　　　　　　fruit: [‘张三‘, ‘李四‘, ‘王五‘]
　　　　}
　　})
</script>

<li :key="item.id" v-for="(item, index) in user" v-text="item.name + item.age"></li>
    
<script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: ‘#app‘,
            data: {
                user: [{
                    id： 1，
                    name: ‘张三‘,
                    age: 17
                },{
                    id： 2，
                    name: ‘李四‘,
                    age: 18
                },{
                    id： 3，
                    name: ‘王五‘,
                    age: 19
                }]
            }
        })
    </script>

key的作用：帮助Vue区分不同的元素，从而提高性能

 　　v-for遍历对象

    <div v-for="(value, key, index) in obj" v-text="value + ‘--‘ + key + ‘--‘ + index"></div>
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: ‘#app‘,
            data: {
                obj: {
                    username: ‘IKUN‘,
                    age: 20,
                    idol: ‘KUN‘
                }
            }
        })

　　v-if与v-for结合使用

<div v-if="value==‘KUN‘" v-for="(value, key, index) in obj" v-text="value + ‘--‘ + key + ‘--‘ + index"></div>