v-if、v-else-if、v-else
基本使用
<template id="my-app">
<h2 v-if="isShow">哈哈哈</h2>
<button @click="toggle">切换</button>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
isShow: true
}
},
methods:{
toggle(){
this.isShow=!this.isShow;
}
}
};
Vue.createApp(app).mount("#app");
</script>多个条件使用
<template id="my-app">
<h2 v-if="score > 90">优秀</h2>
<h2 v-else-if="score > 60">良好</h2>
<h2 v-else>不及格</h2>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
message: "hello world",
score: 50
}
},
methods:{
}
};
Vue.createApp(app).mount("#app");
</script> 如果条件语句顺序错乱（如esle在else if之前），那么将会什么都不显示，也没有报错；
如果在条件语句之间插入非条件的标签，显示会异常并给出警告。
v-if是惰性的（渲染时机）
template和条件渲染结合使用
template可以为一组标签加上统一的条件渲染而不会增加父视图的开销（使用div会多出一个父节点）
<template id="my-app">
<template v-if="isShowHa">
<h2>哈哈哈</h2>
<h2>哈哈哈</h2>
<h2>哈哈哈</h2>
</template>
<template v-else>
<h2>呵呵呵</h2>
<h2>呵呵呵</h2>
<h2>呵呵呵</h2>
</template>
</template>v-show
v-show是不支持template ;
v-show不可以和v-else一起使用;
不显示时：v-show被渲染，但是只是CSS的display不显示；v-if直接不渲染
如果需要频繁的切换显示与不显示，可以使用v-show，否则使用v-if。