Vue中内联样式

最新推荐文章于 2025-03-15 07:30:00 发布

键盘的打工仔

最新推荐文章于 2025-03-15 07:30:00 发布

阅读量498

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_45616246/article/details/105342800

版权

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的style</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 直接写对象 [注意: 在对象中如果有 "-" 出现需要加引号]
        属性值除了是数字,其他的都要加引号才会生效-->
    <h1 :style="{color: 'red', 'font-weight': 200, 'font-style': 'italic'}">这是大大的H1</h1>
    <h1 :style="styleObj1">这是大大的H1~~~~~</h1>

    <!-- 写对象数组 -->
    <h1 :style="[styleObj1, styleObj2]">这是大大的H1========</h1>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObj1: {color: 'red', 'font-weight': '200'},
            styleObj2: {'font-style': 'italic'}
        }
    });
</script>
</html>