三，vue的基础语法之绑定属性（v-bind）

最新推荐文章于 2024-07-19 09:54:10 发布

银角大王qaq

最新推荐文章于 2024-07-19 09:54:10 发布

阅读量798

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44731169/article/details/107321647

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前面我们学习的指令主要作用是将值插入到我们模板的内容当中，但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。这个时候我们就可以使用v-bind指令

v-bind的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<img src="" alt=""/>-->
    <!--<a href="" >百度一下</a>-->
    <img v-bind:src="imgURL" alt=""/>
    <a :href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue",
                imgURL: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',
                aHref: 'Http://www.baidu.com'
            }
        })
</script>

</body>
</html>

v-bind的语法糖

<a :href="aHref">百度一下</a>

v-bind动态绑定class

很多时候，我们希望动态的来切换class，比如
当数据为某个状态时，字体显示红色
当数据另一个状态时，字体显示黑色
v-bind 绑定class有两种方式（对象语法和属性语法）

①动态绑定class对象语法

class后面跟的是一个对象

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <!--<h2 v-bind:class="{key1:value1,key2,value2}"></h2>-->
    {{message}}
    <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
    <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
    <button v-on:click="btnClick()">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue",
                isActive: true,
                isLine: true
            },
            methods: {
                getClasses: function() {
                    return {active: this.isActive,line: this.isLine}
                },

                btnClick:function () {
                    this.isActive= !this.isActive
                }
            }
        })
</script>

</body>
</html>

②动态绑定class数组语法

class后面跟的是一个数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
    <h2 v-bind:class="[active,line]">{{message}}</h2>
    <h2 v-bind:class="getClasses()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue",
                active: 'active1',
                line: 'line1'
            },
            methods:{
                getClasses:function () {
                    return [this.active,this.line]
                }
            }
        })
</script>

</body>
</html>

v-bind动态绑定Style

我们可以利用v-bind:style来绑定一些CSS内联样式
同样也有两种方式，对象语法和数组语法

①动态绑定Style对象语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->

    <!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
    <!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>-->

    <!--finalSize当成一个变量使用-->
    <!--<h2 :style="{fontSize: finalSize}">{{message}}</h2>-->
    <h1 v-bind:style="{fontSize:'50px',color: 'red'}">{{message}}</h1>
    <h1 :style="{fontSize: finalSize}">{{message}}</h1>
    <h2 :style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue",
                finalSize: 60+'px',
                finalColor: 'red'
            },
            methods:{
                getStyles:function () {
                    return {
                        fontSize:this.finalSize,color:this.finalColor
                    }
                }
            }
        })
</script>
</body>
</html>

②动态绑定Style数组语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2 :style="[baseStyle]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue",
                baseStyle:{fontSize:'100px',color:'red'}
            }
        })
</script>

</body>
</html>

银角大王qaq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三，vue的基础语法之绑定属性（v-bind）

前面我们学习的指令主要作用是将值插入到我们模板的内容当中，但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。这个时候我们就可以使用v-bind指令v-bind的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div
复制链接

扫一扫

专栏目录