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-条件判断渲染

上一篇:动态规划问题(十四)自动换行问题


下一篇:web