vue常用指令 v-show
1.v-show
- <strong>v-show指令</strong> 也是条件渲染指令，不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。
- 和v-if指令不同点在于：v-show是根据表达式之真假值，切换元素的 display CSS 属性，当条件变化时该指令触发过渡效果。
<body>
<!--
v-show 根据条件判断元素是否显示, 无论是否显示元素,元素都始终渲染并保存到dom中
-->
<div id="app">
<p v-show="show">显示出来!!!</p>
<p v-show="hide">不要显示!!!</p>
<p v-show="height>1.7">身高:{{height}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
show:true,
hide:false,
height:1.89
}
})
</script>
- v-show和v-if的区别：
- v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件； v-show 则只是简单地基于 CSS 切换。
- v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
2.v-else
- <strong>v-else指令</strong> 可以用v-else指令为v-if或v-show添加一个“else块”。
注意：v-else前一兄弟元素必须有 v-if 或 v-else-if。
<body>
<!-- v-else 为v-if或v-show添加一个else块 -->
<div id="app">
<!--只有一个符合条件,显示-->
<p v-if="show">{{message}}</p>
<p v-else>{{word}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'如果咸鱼也有梦想',
word:'万一实现了呢',
show:false
}
})
</script>
3.v-else-if
<body>
<!-- v-else-if -->
<div id="app">
<p v-if="score>80">优秀</p>
<p v-else-if="score>70">良好</p>
<p v-else-if="score>60">及格</p>
<p v-else>不及格</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
score:75 //根据分数, 显示优秀, 良好, 及格, 不及格
}
})
</script>
