v-show、v-if、v-bind

最新推荐文章于 2021-04-11 14:27:52 发布

zhou-boy

最新推荐文章于 2021-04-11 14:27:52 发布

阅读量115

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_43632167/article/details/109712912

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1：v-show指令

1）根据表达值的真假，切换元素的显示和隐藏

2）根据布尔值切换(true显示,false隐藏)

3）原理是修改元素的display样式，实现显示和隐藏

4）指令后面的值，最终都会被解析为布尔值，也就是true和false

<div id="app">
    <a herf=" " v-show="false"></a>
    <!--如果里面的结果为true则显示，否则就隐藏-->
    <button v-show="age>18"></button>
    <input type="button" value="点击切换显示状态" @click="changeShow">
    <img src=" " v-show="isShow">
</div>
<script>
	var vm = new Vue({
        el:"#app",
        data:{
            isShow:true,
            age:16
        },
        methods:{
            changeShow:function(){
                this.show = !this.show
            }
        }
    })
</script>

2：v-if指令

1）根据表达值的真假，切换元素的显示和隐藏

2）本质是操纵Dom元素来切换，移除或者是添加

3）根据布尔值切换(true显示,false隐藏)

4）表达式的值为true，元素存在于dom树中；为false，元素从dom树中移除

<div id="app">
    <input type="button" value="点击切换显示隐藏" @click="changeIsShow"> 
    <p v-if="isShow">vue</p>
   	<p v-if="age>20">vue</p>
</div>
<script>
	var vm = new Vue({
        el:"#app",
        data:{
            isShow:true,
            age:18
        },
        methods:{
           changeIsShow:function(){
               this.isShow = !this.isShow
           } 
        }
    })
</script>

3：v-bind指令

1）设置元素的属性（比如src，class，title都写在元素的内部）

2）语法 v-bind:属性名 = 表达式简写（ :属性名 = 表达式）

<head>
    <style>
        .active{
            border:1px solid red;
        }
    </style>
</head>
<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <img v-bind:title="imgTiele" alt="">
    <!--拼接-->
    <img v-bind:title="imgTiele + 'vue' " alt="">
    <!--三元表达式-->
    <img v-bind:class="isActive ? 'active' : ' ' " 
         v-bind:src="imgSrc"
         alt=""  
         @click="changeBind">
    <!--简写-->
    <img :class="{'active':isActive}"
         :src="imgSrc"
         alt="" 
         @click="changeBind">
</div>
<script>
	var vm = new Vue({
        el:"#app",
        dtat:{
            imgSrc:"图片地址",
            imgTitle:"vue",
            isActive:true
        },
        methods:{
            changeBind:{
                this.isActive = !this.isActive
            }
        }
    })
</script>

zhou-boy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-show、v-if、v-bind

1：v-show指令1）根据表达值的真假，切换元素的显示和隐藏2）根据布尔值切换(true显示,false隐藏)3）原理是修改元素的display样式，实现显示和隐藏4）指令后面的值，最终都会被解析为布尔值，也就是true和false<div id="app"> <a herf=" " v-show="false"></a>  <button v-show="age
复制链接

扫一扫