vue学习06 v-show指令

目录

vue学习06 v-show指令

v-show指令是：根据真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏

指令后面的内容，最终都会解析为布尔值（true和false）

练习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h5>显示图片v-show</h5>
    <!-- 2.html的结构 -->
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累计年龄" @click="addAge"><br>
        <img v-show="isShow" src="images/猫和老鼠.gif" alt="">
        <img v-show="age>=19" src="images/猫和老鼠.gif" alt="">
    </div>
    <!-- 1.开发环境版本 -->
    <script src="js/vue.js"> </script>
    <!-- 3.创建vue实例 -->
    <script>
       var app = new Vue({
           el:"#app",
           data: {
               isShow:false,
               age:18                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
           },
           methods:{
               changeIsShow: function(){
                   this.isShow = !this.isShow;
               },
               addAge:function(){
                   this.age++;
               }
           },
       })
    </script>
</body>
</html>

运行效果：

image-20200925081051688

posted @ 2020-09-25 08:13  侠客小飞  阅读(269)  评论(0)  编辑  收藏  举报