绑定style属性和class属性

最新推荐文章于 2023-08-31 11:33:21 发布

L.xin Q

最新推荐文章于 2023-08-31 11:33:21 发布

阅读量816

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Lxingling/article/details/127398591

版权

Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

一、绑定style属性

以对象方式绑定style属性属性名对应样式名；属性值对应样式值，一般给变量

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

    <div id="app">

        <!-- 在行内属性中书写样式 -->
        <div style="color: green; font-size:48px">你好呀</div>
        <!-- 把行内属性改造成对象，以对象方式绑定style属性 -->
        <!-- 外部增加{};属性值改造成字符串;分高改造成逗号；属性名到对象名的改变 -->
        <div v-bind:style="{color: 'green',fontSize:'48px'}">你好呀</div>
        <!-- 把属性值改成变量 -->
        <!-- 第一个color是样式名，第二个color是变量名，和data中的变量变量保持一致 -->
        <div v-bind:style="{color:color, fontSize:size}">你好呀</div>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                c0lor:'green',
                size:'24px'
            }
        })
    </script>

二、绑定class属性

当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

<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>
        .box{
            width: 300px;
            height: 300px;
            border: 10px;
        }
        .bg{
            background-color: beige;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 想要动态设置class,也是给一个对象。 -->
        <!-- 属性名：就是类名。 -->
        <!-- 数值值：就是布尔值。如果为true，就代表有这个类名；false，代表没有。 -->
        <!-- <div id="box"  v-bind:class="{bg:true}"></div> -->

        <!-- 把布尔值转换成变量名，在data中去阐明这个变量 -->
        <div class="box"  v-bind:class="{bg:isbg}"></div>

        <!-- 练习：写一个button按钮，点击改变背景颜色 -->
    </div>

    <script src="../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                isbg:true
            }
        })
    </script>
</body>