-
Instrucción: propiedad especial tiene el prefijo V-
V de la bind-
V-IF
V-Show
V-ON: el Click
de V para -
Abreviaciones
V-bind: la src =>: la src
V-ON: Click => @Haga clic -
v-show estado de visualización del elemento de conmutación de acuerdo con el verdadero y falso, el contenido de la instrucción en última instancia, se resolverá a la parte posterior de un valor booleano, un elemento de visualización es verdadero, falso elemento está oculto, el principio es modificar los elementos de visualización, pantalla oculta alcanzado.
<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>
Y puede ser escondido en el nodo de control de la consola de información:
app.isShow
true
app.isShow=false
false
Más aplicaciones:
un botón para cambiar el estado de visualización
<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>
<!-- 开发环境版本,包含了有帮助的命令警告-->
<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>