vue学习-06-条件判断渲染

v-if指令

使用v-if指令可以判断是否渲染指定的区域，不渲染会变成注释

<div id="app">
    <div v-if="flag">
        {{message}}
    </div>
</div>

条件判断支持v-else指令，渲染v-if的另一的区域

<div id="app">
    <div v-if="flag">
        {{message}}
    </div>
    <div v-else>
        else
    </div>
</div>

2.1.0新增了v-else-if，强化条件判断

<div id="app">
    <div v-if="flag">
        {{message}}
    </div>
    <div v-else-if="flag === false">
        else-if
    </div>
    <div v-else>
        else
    </div>
</div>

使用<template>存放多个元素做渲染分组，Vue采用复用高效渲染方法
这种渲染方法不会重头渲染，会复用相同部分，只更改不同部分

<div id="app">
    <template v-if="flag">
        <label for="reg">注册</label>
        <input type="text" id="reg">
    </template>
    <template v-else>
        <label for="log">登录</label>
        <input type="text" id="log">
    </template>
    <input type="button" value="切换" v-on:click="trans">
</div>

    const app = new Vue({
        el: ‘#app‘,
        data: dataObj,
        computed: {

        },
        methods: {
            trans(){
                console.log(this.flag);
                this.flag=!this.flag;
            }
        }
    });

另一种隐藏和显示的指令是v-show，这种指令单纯的display:none或无
v-show不支持<template>和v-else

<div v-show="flag">show</div>

vue学习-06-条件判断渲染

原文：https://www.cnblogs.com/keacua/p/15247207.html