Vue-绑定style样式

最新推荐文章于 2024-07-09 00:17:48 发布

Jealous_-

最新推荐文章于 2024-07-09 00:17:48 发布

阅读量263

点赞数 3

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

本文链接：https://blog.csdn.net/m0_73839298/article/details/138918003

版权

Vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

什么是绑定style样式？

在Vue.js中绑定 style 样式指的是将 HTML 元素的 style 属性与 Vue 实例的数据动态连接起来。根据 Vue 数据的变化来自动更新元素的内联样式。

绑定style样式（对象式写法）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
    <style>
        .basic {
            width: 200px;
            height: 100px;
            border: 1px solid black;

        }

        .happy {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: red;
        }

        .sad {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: blue;
        }

        .normal {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: yellow;
        }

        .apk1 {
            text-align: center;
        }

        .apk2 {
            text-shadow: 1px 1px 0 teal;
        }

        .apk3 {
            border-radius: 50px;
        }
    </style>
</head>

<body>

    <div id="root">
        <!-- <div class="basic" :style="{fontSize: fsize +'px'}">Hello {{name}}</div> -->
        <div class="basic" :style="styleObj">Hello{{name}}</div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        const vm = new Vue({
            el: '#root',
            data: {
                name: 'World!',
                mood: 'normal',
                // fsize: 40,

                styleObj: {
                    fontSize: '40px',
                    // 字体大小： fontSize
                    color: 'red',
                    // 颜色：color
                    backgroundColor: 'orange',
                    // 背景颜色：backgroundColor
                }
            },
        })
    </script>

</body>

</html>
<!-- 
     绑定style样式:对象写法
-->

绑定style样式（数组写法）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
    <style>
        .basic {
            width: 200px;
            height: 100px;
            border: 1px solid black;

        }

        .happy {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: red;
        }

        .sad {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: blue;
        }

        .normal {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: yellow;
        }

        .apk1 {
            text-align: center;
        }

        .apk2 {
            text-shadow: 1px 1px 0 teal;
        }

        .apk3 {
            border-radius: 50px;
        }
    </style>
</head>

<body>

    <div id="root">
        <!-- <div class="basic" :style="[styleObj1,styleObj2]">Hello{{name}}</div> -->
        <div class="basic" :style="styleArray">Hello{{name}}</div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        const vm = new Vue({
            el: '#root',
            data: {
                name: 'World!',
                mood: 'normal',

                // styleObj1: {
                //     fontSize: '40px',
                //     color: 'red',
                // },
                // styleObj2: {
                //     backgroundColor: 'orange',
                // }

                styleArray: [
                    {
                        fontSize: '40px',
                        color: 'red',
                    },
                    {
                        backgroundColor: 'blue',
                    },
                ]
            },

        })
    </script>

</body>

</html>
<!-- 
     绑定style样式:数组写法
-->