06vue学习——通过v-bind属性绑定来为元素设置内联样式

最新推荐文章于 2023-05-18 16:38:41 发布

0563xixi

最新推荐文章于 2023-05-18 16:38:41 发布

阅读量336

点赞数 4

本文链接：https://blog.csdn.net/weixin_42530160/article/details/96911133

版权

06vue学习——通过v-bind属性绑定来为元素设置内联样式

前言

有时候我们需要给元素设置内联样式，但是当内联样式过多时，会显得我们的html代码不够整洁美观，那有什么办法可以来解决这个问题呢？别着急，vue已经想到这个问题了，也提供了方法为我们解决——通过v-bind属性绑定来为元素设置内联样式。接下来让我们来看看这个方法如何使用吧！

注意：当样式的名称包含横杠时必须使用引号将对象的属性名包裹起来

1.使用原始的方法，即不使用v-bind指令来进行属性绑定

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过属性绑定来为元素设置内联样式</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <div class="body">

        <!-- 使用原始的方法，即不使用v-bind指令来进行属性绑定 -->
        <h1 style="color:red">{{msg}}</h1>
    </div>
    <script>
    let vm = new Vue({
    el:".body",
    data:{
        msg:"这是用于测试'通过属性绑定来为元素设置内联样式'的文字",
        styleObj1:{
            "font-weight":200,
            color: '#00f', 
        },
        styleObj2:{
            "font-weight":200,
            color: '#00f',
            "font-style":'italic', 
        }
    }
	})
    </script>
</body>
</html>

这种直接设置方法固然简单，但是当样式很多的时候，我们的html代码就会显得十分的杂乱和丑陋。

2.使用数据绑定来设置内联样式 ——使用一个对象

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过属性绑定来为元素设置内联样式</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <div class="body">
        <!-- 使用数据绑定来设置内联样式 ——使用一个对象-->
        <h2 :style="styleObj1"  v-cloak>{{msg}}</h2>
    </div>
    <script>
    let vm = new Vue({
    el:".body",
    data:{
        msg:"这是用于测试'通过属性绑定来为元素设置内联样式'的文字",
        styleObj1:{
            "font-weight":200,
            color: '#00f', 
        },
        styleObj2:{
            "font-weight":200,
            color: '#00f',
            "font-style":'italic', 
        }
    }
})
    </script>
</body>
</html>

这种方法将多个样式写在了 Model 模块的data中，需要使用时直接调用对象的名称即可，这样一来，我们的html代码便又是整洁美观的了。

3.使用数据绑定来设置内联样式 ——使用多个对象，则需要使用数组将多个对象引入

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过属性绑定来为元素设置内联样式</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <div class="body">
        <!-- 2. 使用数据绑定来设置内联样式——使用多个对象，则需要使用数组将多个对象引入-->
        <h2 :style="[styleObj1,styleObj2]"  v-cloak>{{msg}}</h2>
    </div>
    <script>
    let vm = new Vue({
    el:".body",
    data:{
        msg:"这是用于测试'通过属性绑定来为元素设置内联样式'的文字",
        styleObj1:{
            "font-weight":200,
            color: '#00f', 
        },
        styleObj2:{
            "font-weight":200,
            color: '#00f',
            "font-style":'italic', 
        }
    }
})
    </script>
</body>
</html>

这种方法将多个样式写在了 Model 模块的data中的不同对象中，需要使用多个对象的时候，将对象作为数组传入即刻。

0563xixi

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
06vue学习——通过v-bind属性绑定来为元素设置内联样式

有时候我们需要给元素设置内联样式，但是当内联样式过多时，会显得我们的html代码不够整洁美观，那有什么办法可以来解决这个问题呢？别着急，vue已经想到这个问题了，也提供了方法为我们解决——通过v-bind属性绑定来为元素设置内联样式。接下来让我们来看看这个方法如何使用吧！
复制链接

扫一扫