vue属性绑定与样式操作

最新推荐文章于 2022-10-28 10:40:01 发布

gaearon

最新推荐文章于 2022-10-28 10:40:01 发布

阅读量322

点赞数

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

本文链接：https://blog.csdn.net/weixin_45499478/article/details/113065890

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

属性绑定

属性绑定需要使用 v-bind 指令，简写形式为 :。如下代码所示：

<body>
    <div class="container">
        <a v-bind:href="url1">链接</a><br>
        <a :href="url2">链接</a>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '.container', data: {
                url1: 'https://www.baidu.com',
                url2: 'https://www.csdn.net'
            }
        })
    </script>
</body>

样式绑定

使用 class 属性进行样式处理

提到了属性难免会想到 v-bind 指令，没错，样式绑定确实需要依靠 v-bind 指令或者 : 简写形式，为其添加一个 class 属性，该属性的属性值为对象、数组的形式。

使用对象的方式用于设置单个的 class 属性，属性值由 true 或 false 控制。
使用数组的形式可以设置多个 class 属性。

<div v-bind:class='{active: is_active}'></div>
<div v-bind:class='[class1, class2]'></div>

使用对象形式设置 class 属性

如下代码使用了对象的形式进行 class 属性的设置：

HTML

<body>
    <div class="container">
        <div :class='{active: is_active}'></div>
        <button v-on:click='change'>切换</button>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '.container',
            data: {
                is_active: true
            }, methods: {
                change: function () {
                    this.is_active = !this.is_active
                }
            },
        })
    </script>
</body>

CSS

.container div {
    width: 100px;
    height: 100px;
}
.active {
    background-color: aqua;
}

上面代码中 HTML 部分第 3 行，设置了 active 为 class 的属性值，active 是否生效根据 is_active 决定。
第 4 行代码定义了一个按钮，按钮被点击时，会更改 is_active 的值。如果 is_active 的值为 false 则不在 class 属性中添加。

结果如下：
在这里插入图片描述

若直接将 active 对应的值写为 <div :class='{active: false}'></div> 页面中 div 将没有背景颜色。

使用数组形式设置 class 属性

HTML

<body>
    <div class="container">

        <!-- 设置两个类名，在渲染时将 data 中标签对应的值写入到 class 属性中 -->
        <div v-bind:class='[class1, class2]'></div>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '.container',
            data: {
              
                // 将 class1 设置为 active 类对应的样式
                class1: 'active',
                // 将 class2 设置为 block 类对应的样式
                class2: 'block'
            }
        })
    </script>
</body>

CSS

.container div {
    width: 100px;
    height: 100px;
}
.active {
    background-color: aqua;
}
.block {
    border: 2px solid gray;
}

如果想要取消 class 属性的属性值，需要将相应的属性值设置为 ''，如下代码

vm.class1 = null

使用 `style` 属性设置样式

使用 style 属性进行样式设置时，同样使用 v-bind 指令进行，为元素的内置 style 属性设置内容，同样分为对象方式和数组方式。

使用对象为 `style` 属性设置样式

在使用对象方式为 style 属性设置样式时，可以采用内联对象的形式，也可以采用内联对象的形式，如下语法结构：

<div v-bind:style='obj_style'></div>
<div v-bind:style='{width: width_style, height: height_style, border: border_style}'></div>

第一行使用了外联对象的形式，需要在 Vue 对象的 data 参数中设置一个 obj_style 对象，
第二行代码使用了内置对象，需要在 Vue 对象的 data 参数中为 width_style 等值设置对应的值。

如下代码所示：

<body>
    <div class="container">
        <!-- 使用外联对象形式 -->
        <div v-bind:style='obj'></div>
        <!-- 使用内置对象形式 -->
        <div v-bind:style='{width: width_style, height: height_style, border: border_style}'></div>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '.container',
            data: {
                // 使用外联对象形式，为外联对象设置属性
                obj: {
                    width: '100px',
                    height: '100px',
                    backgroundColor: "green"
                },
                // 使用内置对象形式设置 style 属性时，需要设置内部对象的属性值
                width_style: '100px',
                height_style: '100px',
                border_style: '1px solid #333'
            }
        })
    </script>
</body>

代码中第 4 行和第 6 行分别使用外联对象和内置对象设置了 style 属性，15 - 23 行为相应的对象和属性设置了值。

使用数组为 `style` 属性设置样式

使用数组可以为一个元素设置多个外联、内置对象的样式，如下代码所示：

<div v-bind:style='[obj_style1, obj_style2]'></div>

obj_style1: {
    width: '100px',
    height: '100px',
    border: '1px solid #333'
},
obj_style2: {
    backgroundColor: 'red'
}

当两个对象中的属性相同时，生效的 CSS 样式取决于 v-bind 指令中写在后面的对象。

gaearon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue属性绑定与样式操作

属性绑定属性绑定需要使用 v-bind 指令，简写形式为 :。如下代码所示：<body> <div class="container"> <a v-bind:href="url1">链接</a><br> <a :href="url2">链接</a> </div> <script src="../lib/vue.js"></script
复制链接

扫一扫