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

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

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

    
    



    

        

            现在你可以看到我
        
        

            现在你看不到我
        
    

    

        

            A
        
        

            B
        
        

            C
        
        

            非 A/B/C
        
    
    

        
        
        {{message}}
        

        切换登录类型
    

一、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'的话，则会

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

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

                每天一小点，日积月累。