1. demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 使用v-show做条件渲染,其中v-show 就是调整display属性 -->
<h3 v-show="true">欢迎{{name}}到来</h3>
<h3 v-show="1===1">欢迎{{name}}到来</h3>
<!-- 使用v-if做条件渲染 -->
<h3 v-if="true">欢迎{{name}}到来</h3>
<h3 v-if="1===1">欢迎{{name}}到来</h3>
<!-- v-if 和 v-else-if 和else 是一体的-->
<h3 v-if="1===1">1===1</h3>
<h3 v-else-if="1===1">1===1 v-else-if</h3>
<h3 v-else>1===1 v-else</h3>
</div>
<script text="text/javascript">
new Vue({
el: "#root",
data: {
name: "胡屁股"
}
})
</script>
</body>
</html>
2. 小总结
<!--
条件渲染:
1. v-if
写法:
1. v-if='表达式'
2. v-else-if='表达式'
3. v-else='表达式'
适用于: 切换频率较低的场景
特点: 不展示的DOM元素直接被移除
注意: v-if可以和 v-else-if v-else 一起使用,但是要求结构不能被'打断'
2. v-show
写法: v-show='表达式'
适用于: 切换频率较高的场景
特点: 不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
3. 备注: 使用 v-if时,元素可能无法获取到,而使用v-show 一定可以获取到
-->