V-bind

最新推荐文章于 2024-11-04 10:09:22 发布

2021_fc

最新推荐文章于 2024-11-04 10:09:22 发布

阅读量139

点赞数

分类专栏： Vue 文章标签：微信 html5 html

本文链接：https://blog.csdn.net/weixin_45310564/article/details/120072060

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-bind

如果某些属性我们希望动态来进行绑定：

比如动态绑定a标签的href属性
比如动态绑定img标签的src属性

这时候我们就可以使用v-bind指令：动态绑定属性

指令：v-bing

缩写：:

基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <img src="imgUrl" alt="">			   错误
        <br>
        <img src="imgUrl" alt="">{{imgUrl}}    错误
        <br>
        <img v-bind:src="imgUrl" alt="">       正确
        <br>
        <a href="url">百度以下</a>              错误
        <br>
        <a v-bind:href="url">百度以下</a>		正确
    </div>
    <script>
        const app = new Vue({
            el:'#app', 
            data:{
                imgUrl:'C:/Users/majia/Desktop/壁纸/微信图片_20200120112418.jpg',
                url:'http://www.baidu.com'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

简写（语法糖写法）

<div id="app">
    <img :src="imgUrl" alt="">
    <a :href="url">百度以下</a>
</div>
<script>
    const app = new Vue({
        el:'#app', 
        data:{
            imgUrl:'C:/Users/majia/Desktop/壁纸/微信图片_20200120112418.jpg',
            url:'http://www.baidu.com'
        }
    })
</script>

v-bind 动态绑定class属性（对象语法）

<div id="app">
    <!-- <div :class="{类名1:boolean,类名2:boolean}">{{name}}</div> -->
    <!-- <div :class="{class1:true,class2:false}">{{name}}</div> -->
    <div :class="{class1:isClass1,class2:isClass2}">{{name}}</div>
</div>
<script>
    const app = new Vue({
        el:'#app', 
        data:{
            name:'myq',
            isClass1:true,
            isClass2:false
        }
    })
</script>

在这里插入图片描述

v-bind 动态绑定class属性（数组语法）

<div id="app">
    <div :class="[class1,class2]">{{name}}</div>
    <div class="class3" :class="getClass()">{{name}}</div>
</div>
<script>
    const app = new Vue({
        el:'#app', 
        data:{
            name:'myq',
            class1:"myq1",
            class2:'myq2'
        },
        methods:{
            getClass:function(){
                return [this.class1,this.class2]
            }
        }
    })
</script>

在这里插入图片描述

v-bind绑定style（对象语法）

<div id="app">
    <!-- <div :style="{ket(属性名):value(属性值)}">{{name}}</div> -->
    <!-- value必须加单引号，不然会被vue当成属性去查找。 -->
    <div :style="{fontSize:'100px'}">{{name}}</div>
    <!-- value为属性时 -->
    <div :style="{fontSize:size,color:myColor}">{{name}}</div>
    <!-- 抽取出来 -->
    <div :style="getStyles()">{{name}}</div>
</div>
<script>
    const app = new Vue({
        el:'#app', 
        data:{
            name:'myq',
            size:'50px',
            myColor:'red'
        },
        methods:{
            getStyles:function(){
                return {fontSize:this.size,color:this.myColor}
            }
        }
    })
</script>

在这里插入图片描述

v-bind绑定style（数组语法）

<div id="app">
    <div :style="[styles,styles2]">{{name}}</div>
</div>
<script>
    const app = new Vue({
        el:'#app', 
        data:{
            name:'myq',
            styles:{
                color:'green',
                fontSize:'70px',
                marginLeft:'100px'
            },
            styles2:{
                backgroundColor:'red'
            }
        }
    })
</script>