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>
    <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 行,设置了 activeclass 的属性值,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 指令中写在后面的对象。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页