1.v-if 指令
(1)作用: 根据条件渲染数据
(2)语法:
单分支: v-if="条件语句"
双分支: v-else
多分支: v-else-if="条件语句"(3)注意点
v-else与v-else-if的前面 必须要有 v-if 或者 v-else-if如果不满足条件,则该元素不会添加到DOM树中
<!-- 导包 -->
<script src="./vue.js"></script>
<body>
<!-- HTML结构 -->
<div id="app">
<!-- lazy :懒加载,输入框失去焦点vue才会渲染数据 -->
<input type="text" placeholder="请输入考试分数" v-model.number.lazy="score">
<h2>你的考试分数为:{{ score }}</h2>
<hr>
<p v-if="score>=90">买车</p>
<p v-else-if="score>=80 ">买房</p>
<p v-else-if="score>=60 ">买零食</p>
<p v-else>禁止回家</p>
</div>
<script>
/* 创建vue实例 */
//el:挂载点
//data: 要渲染的数据
let app = new Vue({
el: '#app',
data: {
score: ''
}
})
</script>
</body>
2.v-show 指令
(1)作用: 设置元素的display属性值
(2)语法: v-show="属性值"
属性值为true: 元素的display:block
属性值为false: 元素的display:none
(3)注意点: 显示与隐藏。 只是修改元素的display属性值
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<p v-if="flag"> v-if渲染</p>
<p v-show="flag">v-show渲染</p>
</div>
<script>
/* 创建vue实例 */
//el:挂载点
//data: 要渲染的数据
let app = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
</body>
3.【面试题】v-if和v-show区别
1.v-if : 本质是在动态的创建 或者 删除元素节点
应用场景:如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if
v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销
2.v-show: 本质是在控制元素的 css 样式,
display: none;
应用场景:如果是频繁的切换显示隐藏, 用 v-show
v-if, 频繁切换会大量的创建和删除元素, 消耗性能
v-if和v-show区别面试题逐字稿参考:
面试官你好,我是这么理解v-if和v-show的。 v-if本质其实是动态的创建 或者 删除元素节点。一般不用频繁切换, 要么显示, 要么隐藏的情况, 我都会用 v-if。 因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 这样就可以节省一些初始渲染开销。 v-show本质是在控制元素的 css 样式,display: none;,一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。