v-bind动态绑定属性

最新推荐文章于 2024-03-18 04:03:51 发布

MrX_YOUNG

最新推荐文章于 2024-03-18 04:03:51 发布

阅读量357

点赞数

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

本文链接：https://blog.csdn.net/MrX_YOUNG/article/details/106663963

版权

vue学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

有时候我们希望将某些属性进行动态绑定

比如a元素的href属性
比如img元素src属性

在这些时候，我们可以使用v-bind指令

作用：动态绑定属性
缩写（语法糖）：：

基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind动态绑定属性</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <!-- <img src="{{imgurl}}"> -->
        <a v-bind:href="ahref">百度</a><br>
        <!-- v-bind的语法糖 ":" -->
        <a :href="ahref">语法糖百度</a>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello',
                imgurl: 'p1.png',
                ahref: 'http://www.baidu.com'
            },
            methods: {}
        });
    </script>
</body>

</html>

动态绑定class(对象语法，有键有值）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态绑定数组</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2 class="title" :class="['active','line']">{{message}}</h2>
        <!-- 加‘’会将内容识别为字符串 -->
        <h2 class="title" :class="[active,line]">{{message}}</h2>
        <!-- 不加‘’会将内容识别为变量 -->
        <h2 class="title" :class="getClasses()">{{message}}</h2>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello',
                active: 'aaaaa',
                line: 'bbbbb'
            },
            methods: {
                getClasses: function() {
                    return [this.active, this.line]
                }
            }
        });
    </script>
</body>

</html>

动态绑定style（多用于组件化开发）

我们可以利用v-bind:style来绑定一些CSS内联样式
在写CSS属性名的时候，比如font-size
- CSS属性名必须用驼峰命名法fontSize
- 使用短横杠无法识别
绑定class有两种方式
- 对象语法
  - :style="{color:finalcolor,fontSize:fontsize+'px'}"
  - style后面跟的是一个对象类型
  - 对象的key是css属性名
  - 对象的value是具体的值，值可以来自于data中的属性
- 数组语法
  - <div v-bind:style="[baseStyle,overridingStyles]"><div>
  - style后面跟的是一个数组类型
  - 多个值以，分割

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>绑定style（对象语法）</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 被vm 实例所控制的区域 -->
    <div id="app">
        <!-- <h2 :style="{key(属性名）:value(属性值）">{{message}}</h2> -->
        <!-- 属性值不加''会被识别为变量 -->
        <!-- 只能使用驼峰语法 -->
        <h2 :style="{fontSize:'50px',color:finalcolor}">{{message}}</h2>
        <h2 :style="{fontSize:finalSize}">{{message}}</h2>
        <h2 :style="{fontSize:size+'px'}">{{message}}</h2>
        <h2 :style="getStyle()">{{message}}</h2>
    </div>

    <script>
        //创建实例对象
        const vm = new Vue({
            //指定控制的区域
            el: '#app',
            data: {
                message: 'hello',
                finalSize: '100px',
                size: 100,
                finalcolor: 'red'
            },
            methods: {
                getStyle: function() {
                    return {
                        fontSize: this.finalSize + 'px',
                        backgroundColor: this.finalcolor
                    }
                }
            }
        });
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>数组语法</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 被vm 实例所控制的区域 -->
    <div id="app">
        <h2 :style="[baseStyle,baseStyle2]">{{message}}</h2>
    </div>
    <script>
        //创建实例对象
        const vm = new Vue({
            //指定控制的区域
            el: '#app',
            data: {
                message: 'hello',
                baseStyle: {
                    backgroundColor: 'red'
                },
                baseStyle2: {
                    fontSize: '50px'
                }

            },
            methods: {}
        });
    </script>
</body>

</html>

MrX_YOUNG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-bind动态绑定属性

有时候我们希望将某些属性进行动态绑定比如a元素的href属性比如img元素src属性在这些时候，我们可以使用v-bind指令作用：动态绑定属性缩写（语法糖）：：基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
复制链接

扫一扫

专栏目录