列表渲染指令v-for

588 阅读1分钟

image.png

<body>
    <div id = "app">
        v-for的用法:一定要写在要遍历的元素上<br>
        (1)遍历多个对象;<br>
        学好vue JS的方法:
        <ul>
            <li v-for="vueMth in vueMethods">
                {{vueMth.name}}</li>

        </ul>
        //带索引的写法:括号的第一个变量,代表items,第二个代表index
        <ul>
            <li v-for="(vueMth,index) in vueMethods">
               {{index}}-- {{vueMth.name}}
            </li>
        </ul>
        <br>
        (2)遍历一个对象的多个属性:<br>
        <span v-for="(value,key,index) in nvshen">第{{index+1}}个女神:是{{key}}---{{value}}<br></span>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>

    <script> 
    var app = new Vue({
        el:"#app",
        data:{
            //每个对象对应一个li
            vueMethods:[
                {name: '多思考'},
                {name: '多练习'},
                {name: '多听老张讲课'}
            ],
            nvshen:{
                girl1:'Rose',
                girl2:'Jenny',
                girl3:'Lisa'
            }

        }
    }) 
    </script>
    
</body>

数组