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