后端对于写 if..else..或者 if..else if..else..的条件语句相当的easy,而对于我们的Vue.js来说,这种条件判断夹杂在DOM元素上,也是相当的轻松。


直接上完整demo,在逐一进行讲解


<html>

<head>
    <title>v-if 条件指令渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <div v-if="ok">
            现在你可以看到我
        </div>
        <div v-else>
            现在你看不到我
        </div>
    </div>

    <div id="app2">
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            非 A/B/C
        </div>
    </div>
    <div id="app3">
        <template v-if="loginType==='username'">
            <label>用户名</label>
            <input placeholder="请输入用户名" v-model="name">
        </template>
        <template v-else>
            <label>邮箱</label>
            <input placeholder="请输入邮箱" v-model="email">
        </template>
        <button value="sumbit" @click="login">{{message}}</button>
        <br/>
        <button @click="switchType">切换登录类型</button>
    </div>

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

    var app3 = new Vue({
        el: '#app3',
        data: {
            loginType: "username",
            message: '用户名登录',
            name: '',
            email: ''
        },
        methods: {
            switchType: function () {
                if (this.loginType === 'email') {
                    this.loginType = 'username'
                    this.message = '用户名登录'
                } else {
                    this.loginType = 'email'
                    this.message = '邮箱登录'
                }
            },
            login: function () {
                if (this.loginType === 'username' && this.name === 'appleyk') {
                    alert('登录成功!')
                } else if (this.loginType === 'email' && this.email === '123@qq.com') {
                    alert('登录成功!')
                } else {
                    alert('登录失败!')

                }


            }
        }
    })
</script>

</html>



一、div绑定变量值,如果变量值等于true,div内容显示,如果等于false,不显示


(1)DOM




(2)数据绑定




注意,被vue条件指令渲染的div,如使用v-if 组合 v-else,请务必保证被渲染的两个div是连续的、紧挨着的,否则if..else..渲染失败


默认的ok值等于true,因此,浏览器中,我们会看到




如果,将变量ok的值设为false(浏览器调试模式F12,打开Console控制台),我们会发现




vue渲染DOM是双向的,也就是如果你改变了vue变量的值,会实时更新到对应的DOM元素上




二、使用v-if..v-else-if..v-else的条件指令渲染DOM,匹配 ‘A’‘B’‘C’


(1)DOM





(2)数据绑定(数据模板)






type初始值绑定'A',因此,浏览器中显示




同理,JavaScript控制台重新设定type的值后,随后我们发现相应的DOM数据已更新




三、条件指令应用简单案例 -- 不同登录方式的实现


(1)DOM





使用template模板的好处就是,其指向相同的DOM元素input,当我们切换登录类型时,input标签不会被替换,替换的是placeholder和其v-model绑定的数据,如果想要以示区别,从头开始渲染input,那么需要在input加上key属性,不同的key属性表示input是两个独立的元素,当然,这里我们不会采用从头渲染的方式,以减少性能开销。


click绑定事件(简写) : @click 等同于 v-on:click


(2)数据模板




我们先来看一下,以用户名的登录方式进行登录验证是什么样的






如果输入的不是'appleyk'的话,则会




我们切换到登录方式为  - -  邮箱登录,试试





我们输入邮箱名,进行登录验证







                每天一小点,日积月累。


Logo

前往低代码交流专区

更多推荐