Vue列表渲染(基础篇)

复习一下前端条件渲染知识点

v-for in xxx 等价于 v-for of xxx

废话不多说，操作很简单，该文档作为自己简单笔记使用，大神勿喷！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <!-- 遍历数组对象 -->
        <ul>
            <li v-for="(item,index) in person" :key="item.id">{{item.age}}--{{item.name}}</li>
        </ul>
        <!-- 遍历对象 -->
        <ul>
            <li v-for="(value,key) in car">{{value}} -- {{key}}</li>
        </ul>
        <!-- 遍历字符串 -->
        <p v-for="(value,index) in hello" :key="index">{{value}} -- {{index + 1}}</p>

        <!-- 指定遍历次数 -->
        <p v-for="(value,index) of 5">{{value}} -- {{index + 1}}</p>
    </div>
</body>
<script src=" ../VueJs/vue.js">
</script>
<script>
    new Vue({
        el: "#root",
        data: {
            person: [
                {
                    'id': 001,
                    'name': '张三',
                    'age': 20
                },
                {
                    'id': 002,
                    'name': '李四',
                    'age': 25
                },
                {
                    'id': 003,
                    'name': '王五',
                    'age': 22
                }

            ],
            car: {
                'name': '奔驰E级',
                'price': 400000,
            },
            hello: "你真是个漂亮的小姑娘呀!"
        }
    })
</script>

</html>

三更灯火五更鸡，正是男儿读书时!

posted @ 2022-03-06 16:09  含泪拒绝王阿姨i  阅读(55)  评论(1)    收藏  举报