Day19_08_Vue教程之v-else-if

Vue教程之v-else-if 一.连续的条件判断语句

• v-if

• v-else-if

• v-else

二.HTML

    A
    B
    C
    你看不见我

注：=== 三个等号在 JS 中表示绝对等于（就是数据与类型都要相等）

三.JavaScript

    var vm = new Vue({
        el: '#vue',
        data: {
            type: 'A'
        }
    });

四.测试效果

• 在 Chrome 浏览器上运行，并按 F12 进入 开发者工具

• 分别观察在控制台输入 vm.type = 'B'、'C'、'D' 的变化

• 

五.完整的 HTML

    
    语法篇 v-else-if
    




    A
    B
    C
    你看不见我



    var vm = new Vue({
        el: '#vue',
        data: {
            type: 'A'
        }
    });

六.v-if,v-else 1. 条件判断语句

• v-if

• v-else

什么是条件判断语句，就不需要我说明了吧（￣▽￣），直接看语法上效果

2. HTML

    YES
    NO

3. JavaScript

    var vm = new Vue({
        el: '#vue',
        data: {
            ok: true
        }
    });

4. 测试效果

• 在 Chrome 浏览器上运行，并按 F12 进入 开发者工具

• 在控制台输入 vm.ok = false ，然后 回车，你会发现浏览器中显示的内容会直接变成 NO

注：使用 v-* 属性绑定数据是不需要 双花括号 包裹的 5. 完整的 HTML

    
    语法篇 v-if
    




    YES
    NO



    var vm = new Vue({
        el: '#vue',
        data: {
            ok: true
        }
    });