vue---v-if v-for 指令使用

指令 (Directives) 是带有 v- 前缀的特殊特性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-if 指令是vue的条件控制语句

v-for 指令是vue的循环语句

【app.js】

new Vue({
    el: "#vue-app",
    data: {
        arrs: ["Maria", "Lucy", "Mike"],
        users: [
            { name: "buding", age: "20" },
            { name: "zhou", age: "10" },
            { name: "Blanck", age: "13" },
            { name: "Winner", age: "26" },
        ]
    },
    methods: {

    },
    computed: {
    }
});

【index.html】

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- vue-app是根容器元素 -->
    <div id="vue-app">
        <!-- 数组下标 -->
        {{arrs[0]}}
        {{arrs[1]}}
        {{arrs[2]}}

        <!-- 数组遍历 -->
        <ul>
            <li v-for="arr in arrs">{{arr}}</li>
        </ul>
        <!-- 对象遍历 -->
        <ul>
            <li v-for="(user,index) in users">
                <p v-if="user.age>=18">{{index+1}}.{{user.name}}-{{user.age}}-成年人</p>
                <p v-else>{{index+1}}.{{user.name}}-{{user.age}}-未成年</p>
            </li>
        </ul>


        <template>
            <div v-for="user in users">
                <div v-for="(val,key) in user">
                    {{key}}-{{val}}
                </div>
            </div>
        </template>

    </div>
    <script src="app.js"></script>
</body>

</html>

vue---v-if v-for 指令使用

猜你喜欢