v-if、v-else-if、v-else

最新推荐文章于 2024-10-28 11:01:18 发布

Eli-sun

最新推荐文章于 2024-10-28 11:01:18 发布

阅读量193

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/vfjcgg/article/details/106606384

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

v-if、v-else-if、v-else

1.这三个指令与JavaScript的条件语句if、else、else if类似。
2.Vue的条件指令可以根据表达式的值DOM中渲染或销毁元素或组件。

v-if

<div id="app">
        <h2 v-if="isShow">
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            {{message}}
        </h2>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello',
                isShow: true,
            }
        })
    </script>

v-if、v-else

<div id="app">
        <h2 v-if="isShow">
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            {{message}}
        </h2>

    <h1 v-else>isShow为false时，显示我</h1>
</div>

<script src="../2020-6-Vuejs/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            isShow: true,
        }
    })
</script>

v-else-if

<div id="app">
        <h2 v-if="score>=90">优秀</h2>
        <h2 v-else-if="score>=">良好</h2>
        <h2 v-else-if="score>=60">及格</h2>
        <h2 v-else>不及格</h2>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                score: 90,
            }
        })
    </script>

v-if的原理：
1.v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
2.也就是根本不会有对应的标签出现在DOM中。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2 v-if="score>=90">优秀</h2>
        <h2 v-else-if="score>=">良好</h2>
        <h2 v-else-if="score>=60">及格</h2>
        <h2 v-else>不及格</h2>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                score: 90,
            },
            computed: {
                result() {
                    let showMessage = '';
                    if (this.score >= 90) {
                        showMessage = '优秀';
                    } else if (this.score >= 80) {
                        showMessage = '良好';
                    }
                    return showMessage;
                }
            }
        })
    </script>
</body>

</html>