v-for

v-for 可用于根据数据生成列表结构 
<body>
    <script src="../vue.js"></script>
    <div id="mydiv">
        <!-- 类似 python 中的 for 循环 -->
        <li v-for="item in arr">{{ item }}</li>
        <!-- 索引 -->
        <li v-for="(item,index) in arr">{{ index }} : {{ item }}</li>
        <!-- 对象数组 -->
        <li v-for="item in person">my name is {{ item.name }}, and my age is {{ item.age }}</li>
    </div>
    <script src="work2.js"></script>
</body>
var app = new Vue({
    el:'#mydiv',
    data:{
        arr:['a','b','c','d','e'],
        person:[
            {name:'大湘菜',age:18},
            {name:'小湘菜',age:8}
        ]
    }
})

 

posted @ 2022-11-27 09:24  树叶本子  阅读(47)  评论(0)    收藏  举报