Vue 2.x – 列表渲染(基本列表)

v-for

1.用于展示列表数据
2.语法:v-for="(item, index) in xxx" :key="yyy"
3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

<div id="root">
<!-- 遍历数组 -->
<h2>人员列表(遍历数组)</h2>
<ul>
    <li v-for="(p,index) of persons" :key="index">
        {{p.name}}-{{p.age}}
    </li>
</ul>

<!-- 遍历对象 -->
<h2>汽车信息(遍历对象)</h2>
<ul>
    <li v-for="(value,k) of car" :key="k">
        {{k}}-{{value}}
    </li>
</ul>

<!-- 遍历字符串 -->
<h2>测试遍历字符串(用得少)</h2>
<ul>
    <li v-for="(char,index) of str" :key="index">
        {{char}}-{{index}}
    </li>
</ul>

<!-- 遍历指定次数 -->
<h2>测试遍历指定次数(用得少)</h2>
<ul>
    <li v-for="(number,index) of 5" :key="index">
        {{index}}-{{number}}
    </li>
</ul>
</div>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:19},
                {id:'003',name:'王五',age:20}
            ],
            car:{
                name:'奥迪A8',
                price:'70万',
                color:'黑色'
            },
            str:'hello'
        }
    })
</script>

Snipaste_2021-08-17_16-38-38.png

转载请注明出处,谢谢!
THE END
分享
二维码
打赏
< <上一篇
下一篇>>