vue class和style的动态绑定举例

vue class和style的动态绑定举例

概述

此文章依据官网进行自我整理总结，便于工作中进行直接代码复用。

class的绑定

对象语法

可以用于通过变量来控制class添加与否
<div :class="{active: isActive,‘bigFz’:isBigFz}">
isActive 为true时添加

数组语法

可以用于添加多个动态class，也可以通过三目来控制某个class，实际中使用对象形式
<div :class="[{active: isActive,bigFz:isBigFz},‘bold’]">

style的绑定

对象语法

可以同时添加多个属性进行控制,可以添加动态数字变量
<div :style="{ color: activeColor, fontSize: fontSize + ‘px’ }">
<div :style="{transform:‘rotate(’+rotate+‘deg)’}">
注：此处对象不支持es6 ${} 语法，只能字符拼接，可以在计算属性中使用es6的拼接语法，可参考后面数组语法示例

数组语法

可以同时添加多个属性组进行控制，
其实就是把多个对象属性放到一起

<div :style="[styleObject,styleObject2,styleObject3]">
styleObject(){
    return `transform:rotate(${this.rotate}deg)`
},
styleObject2(){
    return `transform:rotate(${this.rotate}deg)`
}
styleObject3(){
    return `transform:rotate(${this.rotate}deg)`
}

完整demo

<template>
<div class="style">
    <h1>vue动态绑定style和class举例</h1>
    <h2>class</h2>
    <div class="card">
        <h3>对象语法：属性控制class添加,可以控制多个</h3>
        <p class='title'>用途说明：可以用于通过变量来控制class添加和去除</p>
        <code>&lt;div :class="{active: isActive,'bigFz':isBigFz}"></code>
        <p class='title'>用法优化：也可以把对象单独提炼出来，写到计算属性里，不必写到行内</p>
        <code>&lt;:class="classObject"></code>
        <div :class="{active: isActive,'bigFz':isBigFz}">
            <span @click="isActive=!isActive" class="hand">【点击切换颜色】</span>
            <span @click="isBigFz=!isBigFz" class="hand">【点击切换字体大小】</span>
        </div>
        <div :class="classObject">
            <span @click="isActive=!isActive" class="hand">【点击切换颜色】</span>
            <span @click="isBigFz=!isBigFz" class="hand">【点击切换字体大小】</span>
        </div>
    </div>
    <div class="card">
        <h3>数组语法：可以添加多个</h3>
        <p class='title'>用途说明：可以用于添加多个动态class，也可以通过三目来控制某个class，</p>
        <code>&lt;div :class="[isActive?'active':'' ,isBigFz?'bigFz':'']"></code>
        <p class='title'>三目比较繁琐时，可以使用数组套对象的方式</p>
        <code>&lt;div :class="[{active: isActive,'bigFz':isBigFz},'bold']"></code>
        <div :class="[isActive?'active':'' ,isBigFz?'bigFz':'']">
            <span @click="isActive=!isActive" class="hand">【点击切换颜色】</span>
            <span @click="isBigFz=!isBigFz" class="hand">【点击切换字体大小】</span>
        </div>
        <div :class="[{active: isActive,'bigFz':isBigFz},'bold']">
            <span @click="isActive=!isActive" class="hand">【点击切换颜色】</span>
            <span @click="isBigFz=!isBigFz" class="hand">【点击切换字体大小】</span>
        </div>
    </div>
    <hr>
    <h2>style</h2>
    <div class="card">
        <h3>对象语法：可以同时添加多个属性进行控制,可以添加动态数字变量</h3>
        <code>&lt;div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></code>
        <p class="title">旋转属性的写法一：行内写法</p>
        <p><code>&lt;div :style="{transform:'rotate('+rotate+'deg)'}"></code></p>
        <p class="title">旋转属性的写法二：使用对象变量+计算属性</p>
        <code>
            <p>&lt;div :style="styleObject"></p>
                styleObject(){
                    return `transform:rotate(${this.rotate}deg)`
                }
        </code>
        <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
            <input type="number" v-model='fontSize' style="width:100px">
            这里是显示文字
        </div>
        <div>
            输入不同角度进行旋转
            <input type="number" v-model='rotate' style="width:100px" step="5">
            <p :style="styleObject" style="border:1px solid #f00;width:100px;height:40px"></p>
        </div>
        <!-- <div :style="{transform:'rotate('+rotate+'deg)'}" style="border:1px solid #f00;width:350px">
            <input type="number" v-model='rotate' style="width:100px" step="5">
            输入不同角度进行旋转进行旋转
        </div> -->
        <h3>数组语法：可以同时添加多个属性组进行控制</h3>
        <p>用法说明:其实就是把多个对象属性放到一起</p>
         <code>
            <p>&lt;div :style="[styleObject,styleObject2,styleObject3]"></p>
                <p>styleObject(){
                    return `transform:rotate(${this.rotate}deg)`
                },</p>
                <p>styleObject2(){
                    return `transform:rotate(${this.rotate}deg)`
                }</p>
                <p>styleObject3(){
                    return `transform:rotate(${this.rotate}deg)`
                }</p>
        </code>
    </div>
</div>
</template>

<script>
export default {
    computed: {
        classObject: function () {
            return {
                active: this.isActive ,
                bigFz: this.bigFz,
            }
        },
        styleObject(){
            return `transform:rotate(${this.rotate}deg)`
        }
    },
    data() {
        return {
            isActive: false,
            isBigFz: false,
            objClass: {
                active: this.isActive,
                'bigFz': this.bigFz
            },
            activeColor: 'red',
            fontSize: 20,
            rotate:10
        }
    },
}
</script>

<style lang="scss" scoped>
.style {
    padding: 50px;
    margin-bottom: 200px;
    .title{
        font-weight: bold;
        color:#e37474;
    }

    .active {
        font-weight: bold;
        color: #f00;
    }

    .bigFz {
        font-size: 20px;
    }
    .bold{
        font-weight: bold;
    }
}

.hand {
    cursor: pointer
}

.card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px
}
</style>

官网链接

vue绑定class和style