Vue官网教程-条件渲染

时间：2018-08-25 21:24:01 阅读：164 评论：0 收藏：0 [点我收藏+]

通过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>