启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情
指令
可以实现元素的显示和隐藏
v-if
根据值决定是否创建指定的元素
-
v-if='值'：值是bool值
-
效果：
- 如果值是true,则会创建这个元素并进行渲染--显示
- 如果值为False,则不会创建这个元素-"隐藏"
<div id="app">
<p v-if='isShow'>能不能看到我啊？</p>
<button @click='isShow=!isShow'>切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow:true
}
})
</script>
v-show
根据值来设置元素的Display样式
-
v-show='值'，值是bool值
-
效果：
- 如果值是true，将这个元素的display样式设置为block--显示
- 如果值是false，将这个元素的display样式设置为none--隐藏
<div id="app">
<p v-show='isShow'>能不能看到我啊？</p>
<button @click='isShow=!isShow'>切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow:true
}
})
</script>
使用场景
1.如果是伴随着异步请求所造成的页面结构的操作，一般就可以使用v-if
2.如果是页面中的共用部分的显示和隐藏那么一般就可使用v-show
v-if v-else-if v-else
<!-- bool值 关系表达式(> < >= <= != === == !==) 逻辑表达式：(非not 与and 或or) -->
<div id="app">
输入成绩：<input type="text" v-model='score'>
<p>你的成绩等级是：</p>
<div v-if='score>=90'>A</div>
<div v-else-if='score>=80'>B</div>
<div v-else-if='score>=70'>C</div>
<div v-else-if='score>=60'>D</div>
<div v-else>E</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 0
}
})
</script>
v-cloak
-
作用：它可以隐藏指定的元素，直到当前vm实例编译完毕
-
使用场景：不希望页面中出现未编译的标签
-
使用方法：
- 添加指定的样式
- 为元素的添加v-cloak
<style> [v-cloak] { display: none; } </style> --------------------------- <div id="app"> <p v-cloak>{{msg}}</p> </div>
v-pre,v-once
<div id="app">
<!-- 这个标签中插值不会被解析 -->
<p v-pre>{{msg}}</p>
<!-- 只渲染一次，后期的渲染会跳过这个元素 -->
<p v-once>{{msg}}</p>
<input type="text" v-model='msg'>
<!-- 插槽：匿名插槽，具名插槽，作用域插槽 -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'你好'
}
})
</script>
