Vue 基本列表

v-for：用于展示列表数据

写法：v-for="(item,index) in xxx" :key="yyy"

可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <ul>
        <!--  遍历数组  -->
        <h3>遍历数组</h3>
        <li v-for="(p,index) in persons" :key="index">
            {{p.name}} - {{p.age}}
        </li>

        <!--  遍历对象  -->
        <h3>遍历对象</h3>
        <li v-for="(value,k) in car" :key="k">
            {{k}} - {{value}}
        </li>

        <!--  遍历字符串（用的少）  -->
        <h3>遍历字符串</h3>
        <li v-for="(char,index) in str" :key="index">
            {{index}} - {{char}}
        </li>

        <!--  遍历指定次数（用的少）  -->
        <h3>遍历指定次数</h3>
        <li v-for="(number,index) in 5" :key="index">
            {{index}} - {{number}}
        </li>
    </ul>
</div>
</body>

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

posted @ 2022-04-10 20:18 春暖花开鸟阅读(704) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue 列表过滤

· Vue 关于 el 和 data 的两种写法

· Vue 列表渲染之v-for指令

· 11 列表渲染-基本列表

· Vue中的v-for