-
指令:是带有 v- 前缀的特殊属性
v-bind
v-if
v-show
v-on:click
v-for -
缩写
v-bind:src => :src
v-on:click => @click -
v-show 根据真假切换元素的显示状态,指令后面的内容最终都会解析为布尔值,值为true元素显示,值为false元素隐藏。
-
v-show也是指条件性渲染,用法与v-if类似:
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
<div id="app">
<!--
v-show 根据真假切换元素的显示状态
指令后面的内容最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
原理是修改元素的display,实现显示隐藏
-->
<div v-show="isShow">动态显示和隐藏</div>
<!--
输出动态显示和隐藏
-->
</div>
<!-- 开发环境版本,包含了有帮助的命令警告-->
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: true, //显示, false不显示
},
})
</script>
可在控制台控制节点的显示和隐藏:
app.isShow
true
app.isShow=false
false
更多应用:
通过按钮切换显示状态
<div id="app">
<!--
v-show 根据真假切换元素的显示状态
指令后面的内容最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
原理是修改元素的display,实现显示隐藏
-->
<input type="button" value="切换显示状态" @click="changeIsShow">
<input type="button" value="累加年龄" @click="addAge">
<img v-show="isShow" src="a.png" alt="">
<img v-show="age>=18" src="a.png" alt="">
<!-- <div v-show="isShow">动态显示和隐藏</div> -->
<!--
输出动态显示和隐藏
-->
</div>
- v-if与v-show区别
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
<!-- 开发环境版本,包含了有帮助的命令警告-->
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false, //不显示, true显示
age:15
},
methods: {
changeIsShow: function () {
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
}
})
</script>
- 注意:
this—在构造函数中,访问本身方法时,需要利用this代表自身,去指向对应的方法和数据。