Vue.js之绑定style样式

cloudOnSkyline

已于 2022-07-19 18:34:22 修改

阅读量893

点赞数

分类专栏： JavaScript 文章标签： vue.js javascript

于 2022-07-11 16:02:50 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125723408

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

上文介绍了如何利用Vue.js绑定类，本文将介绍通过Vue.js进行样式修改的另一种方法，即通过style来修改。

核心：为元素绑定style属性，通过对象的形式赋予样式，属性名为样式名（要使用驼峰命名法），属性值为字符串。若要引入多组样式，可以利用数组，后面出现的重复属性会覆盖之前的属性，如下例中的height。当然，也可以于元素行内赋予样式，例如:style="{backgroundColor:color}",这时可以通过在data中定义color数据控制样式的变化。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div :style="[s,s1]"></div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                s: {
                    width: '400px',
                    height: '400px',
                    backgroundColor: 'orange',
                    margin: '0 auto'
                },
                s1: {
                    border: '10px solid red',
                    height: '500px'
                }
            }
        })
    </script>
</body>

</html>

效果如图：

cloudOnSkyline

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js之绑定style样式

上文介绍了如何利用Vue.js绑定类，本文将介绍通过Vue.js进行样式修改的另一种方法，即通过style来修改。核心：为元素绑定style属性，通过对象的形式赋予样式，属性名为样式名（要使用驼峰命名法），属性值为字符串。若要引入多组样式，可以利用数组，后面出现的重复属性会覆盖之前的属性，如下例中的height。当然，也可以于元素行内赋予样式，这时可以通过在data中定义数据控制样式的变化。效果如图：......
复制链接

扫一扫