[Vue]条件渲染
文章目录
- 一、语法介绍
- 二、添加代码
- 三、结果展示
- 四、参考文献
一、语法介绍
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
官方介绍：一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。个人理解：awesome为ture，渲染Vue is awesome!，反之渲染Oh no 😢。
二、添加代码
<template>
<h3>条件渲染</h3>
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
<h1 v-show="ok">Hello!</h1>
</template>
<script>
export default {
data() {
return {
type: "A",
ok:true
};
},
};
</script>
三、结果展示
四、参考文献
[1] vue.js.
[2] vue从入门到精通.