Vue学习随笔2（v-show，v-if，v-bind）

最新推荐文章于 2024-05-10 18:15:56 发布

泡菜鱼丷

最新推荐文章于 2024-05-10 18:15:56 发布

阅读量281

点赞数

分类专栏： Vue笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_57275829/article/details/123654756

版权

Vue笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

v-show:根据表达值的真假，切换元素的显示和隐藏

<body>
<div id="app"> 
    <img  v-show="isShow" src="./小黑.jfif">
    <img  v-show="age>=20" src="./小黑.jfif">
   <input type="button" value="显示状态" @click="changisShow">
   <input type="button" value="累加年龄" @click="addAge">
</div>  
<script>
    var app = new Vue({
        el:"#app",
        data:{
          isShow:false,
          age:17
        },
        methods:{
         changisShow:function(){
             this.isShow=!this.isShow;
         },
        addAge:function(){
            this.age++;
        }
        },
    })
</script>
</body>

v-show指令的作用：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false隐藏
数据改变之后，对应的显示状态会同步更新

v-if：根据表达式的真假，切换元素的显示和隐藏（操纵DOM元素）

v-if指令的作用是根据表达式真假切换元素的显示状态
本质是通过操纵DOM元素来切换显示状态
表达式的状态为true，元素存在于DOM树中，为false，从DOM树中移除
频繁的切换v-show，反之，使用v-if，前者的切换消耗小

<body>
<div id="app"> 
    <input type="button" value="切换显示" @click="toisShow">
    <p v-if="isShow">这是一个v-if的示例</p>
</div>  
<script>
    var app = new Vue({
        el:"#app",
        data:{
         isShow:false
        },
        methods:{
            toisShow:function(){
                this.isShow=!this.isShow;
            }
        }
    })
</script>
</body>

v-bind：为元素绑定属性（src,title class等）

v-bind指令的作用是为元素绑定属性
完整写法是 v-bind：属性名
简写可以省略v-bind，只保留：属性名
需要动态的增删class建议使用对象的方法

<body>
    <style>
        .active{
            border: 2px solid red;
        }
    </style>
<div id="app">
    <img v-bind:src="imgSrc">
    <img :src="imgSrc" :title="imgTitle "
     :class="isActive?'active':''" @click="toisActive">
     <!--以对象形式-->
    <img :src="imgSrc" :title="imgTitle + '!!!!'" 
    :class="{active:isActive}" @click="toisActive">
</div>  
<script>
    var app = new Vue({
        el:"#app",
        data:{
        imgSrc:"./小黑.jfif",
        imgTitle:"这是一张罗小黑图片",
        isActive:false
        },
        methods:{
            toisActive:function(){
                this.isActive = !this.isActive;
            }
        }
    })
</script>
</body>

泡菜鱼丷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习随笔2（v-show，v-if，v-bind）

v-show:根据表达值的真假，切换元素的显示和隐藏<body><div id="app"> <img v-show="isShow" src="./小黑.jfif"> <img v-show="age>=20" src="./小黑.jfif"> <input type="button" value="显示状态" @click="changisShow"> <input type="button
复制链接

扫一扫