v-if指令
| 指令名称 | 指令作用 | 示例 | 简写形式 |
|---|---|---|---|
| v-if | 根据条件渲染数据 | v-if="score>=90" | 无 |
| v-show | 设置元素的display | v-show="age>=30" | 无 |
-
v-if官网文档：cn.vuejs.org/v2/api/#v-i…
(1)作用： 根据条件渲染数据 (2)语法： 单分支： v-if="条件语句" 双分支： v-else 多分支: v-else-if="条件语句" (3)注意点 v-else与v-else-if的前面 必须要有 v-if 或者 v-else-if
`
Document<!-- HTML结构 -->
<div id="app">
<!-- lazy :懒加载，输入框失去焦点vue才会渲染数据 -->
<input type="text" v-model.lazy="score" placeholder="请输入考试分数">
<h2>你的考试分数为：{{ score }}</h2>
<hr>
<h3 v-if="score>=90">爸爸给你买法拉利</h3>
<h3 v-else-if="score>=80">爸爸给你买保时捷</h3>
<h3 v-else-if="score>=60">爸爸给你买奥迪</h3>
<h3 v-else>爸爸给你爱的掌声</h3>
</div>
<!--
(1)作用： 根据条件渲染数据
(2)语法：
单分支： v-if="条件语句"
双分支： v-else
多分支: v-else-if="条件语句"
(3)注意点
v-else与v-else-if的前面 必须要有 v-if 或者 v-else-if
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
score: '',
}
})
</script>
v-show指令
v-show官网文档：https:cn.vuejs.org/v2/api/#v-s…
(1)作用： 设置元素的display属性值
(2)语法： v-show="属性值"
属性值为true: 元素的display:block
属性值为false: 元素的display:none
(3)v-show与v-if区别
v-if : 条件渲染。 如果不满足条件，则该元素不会添加到DOM树中
v-show: 显示与隐藏。 只是修改元素的display属性值
`
Document<!-- HTML结构 -->
<div id="app">
<p v-if="age>=30">我是v-if渲染出来的</p>
<p v-show="age>=30">我是v-show渲染出来的</p>
</div>
<!--
1.学习目标： v-show 指令
2.学习路线：
(1)作用： 设置元素的display属性值
(2)语法： v-show="属性值"
属性值为true: 元素的display:block
属性值为false: 元素的display:none
(3)v-show与v-if区别
v-if : 条件渲染。 如果不满足条件，则该元素不会添加到DOM树中
v-show: 显示与隐藏。 只是修改元素的display属性值
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
age: 20,
}
})
</script>
