Vue官网教程-条件渲染-优快云博客

博客主要介绍了JavaScript中v-if的使用方法，如通过v-if展示DOM是否显示，可使用else，改变值时注意引号问题，还提到可使用template改变多个标签，v-else要紧跟v-if等，同时指出v-if每次切换会创建和销毁，相比v-show有不同特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过v-if展示一个DOM是否显示

<div id="app">

        <!-- v-if的值为ok -->
        <div v-if="ok">Hello World</div>

    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                ok : true
            }
        })
    </script>

改为false就不会显示了

可以使用else的。

<div v-if="ok">Hello World</div>
<div v-else>Hello You</div>

改变ok的值为false,注意这个false是没有''引号的，带引号的是字符串，没效果的

因为v-if只能改变自己的DOM，如果想改变好几个标签要怎么办？

可以使用template

<div v-if="ok">Hello World</div>

        <template v-else>
            <div>Hello You</div>
            <div>Hello You</div>
            <div>Hello You</div>
        </template>

v-else 要紧跟在v-if ，v-else-if后面！

一句话，加上key值，key值不同，就会当作不同的元素，重新渲染。

label没有key，所以label是复用的，只是改了innerHtml而已。

自己写一下完整代码

1、判断的时候，是使用全等哦！ ===

2、v-if后面跟的是表达式。v-if要用true和false

<div id="app">

        <!-- 全等 === -->
        <!-- 双引号里面的字符串用单引号 -->
        <template v-if="loginType=== 'username'">
            <label>UserName</label>
            <input placeholder="UserName">
        </template>

        <template v-else>
            <label>Email</label>
            <input placeholder="Email">
        </template>

        <br>
        <button @click="handleClick">切换</button>
        

    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                // 初始化
                loginType:'username'
            },
            methods:{
                handleClick:function (){
                    this.loginType === 'username'?this.loginType='email':this.loginType='username'
                }
            }
        })
    </script>