Vue.js入门学习--v-if 组合 v-else-if条件指令渲染DOM（三）

后端对于写 if..else..或者 if..else if..else..的条件语句相当的easy，而对于我们的Vue.js来说，这种条件判断夹杂在DOM元素上，也是相当的轻松。直接上完整demo，在逐一进行讲解v-if 条件指令渲染现在你可以看到我

appleyk

13378人浏览 · 2018-01-31 11:45:11

appleyk · 2018-01-31 11:45:11 发布

后端对于写 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'的话，则会

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

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

每天一小点，日积月累。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^