四 Vue中class与style绑定

一、用对象的方法绑定class

说明
- 设置一个对象，可以动态地切换class
- 对象中也可以传入多个属性，来动态切换class,另外，:class可以与普通class共存
- class的表达式过长或者逻辑复杂时候，还可以绑定一个计算属性，这是一种友好和常见的用法，一般当条件多于两个时，都可以使用data或者computed

基础使用

<style type="text/css">
    .btn {
        padding: 6px 12px;
        font-size: 14px;
        font-weight: normal;
    }
</style>
<div id="app">
    <button :class="btnClass">绑定对象</button>
</div>
<script>
    /**
     * 静态绑定
     */
    new Vue({
        el: "#app",
        data: {
            // 当btnClass改变时将更新class
            btnClass:'btn'
        }
    })
</script>
<!--渲染之后 -->
<button class="btn">绑定按钮</button>

绑定对象

<style>
    .btn {
        padding: 6px 12px;
        font-size: 14px;
        font-weight: normal;
    }
    .btn-default {
        color: #333;
        background-color: #fff;
        border-color: #ccc;
    }
</style>
<div id="app">
    <!-- 这里的active单引号可加不加可不加 多个对象用,逗号隔开 -->
     <!-- 注意使用-命名一定要加下 单引号 '' -->
    <p class="btn" :class="{ 'active':isActive,'btn-default':isDefault }" v-text="shop.title"></p>
</div>
<div id="app">
    <button :class="{btn:isActive,'btn-default':isDefault}">绑定按钮</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            isActive: false
            isDefault: true,
        }
    })
</script>
<!-- 渲染之后 -->
<button class="btn btn-default">绑定对象</button>

绑定多个对象(data里面中声明)

:class="btnClass"
<script>
    new Vue({
        el: "#app",
        data: {
           btnClass:{
               btn:isActive,'btn-default':isDefault
           }
        }
    })
</script>

绑定多个对象(computed里面中声明)

 <style type="text/css">
        .btn {
            padding: 6px 12px;
            font-size: 14px;
            font-weight: normal;
        }
        .btn-default {
            color: #333;
            background-color: #fff;
            border-color: #ccc;
        }
        .active {
            background-image: none;
            outline: 0;
            -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            color: #fff;
            background-color: #5cb85c;
            border-color: #4cae4c;
        }
<div id="app">
    <button class="btn" :class="btnClass" @mouseenter="isEnter" @mouseleave="isLeave">绑定多个属性</button>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            isActive: false,
            isDefault: true,
        },
        computed: {
            btnClass: function () {
                return {
                    'btn-default': this.isDefault,
                    'active': this.isActive,
                }
            }
        },
        methods: {
            isEnter: function () {
                this.isActive = true;
            },
            isLeave: function () {
                this.isActive = false;
            }
        }
    })

二、用数组的方法绑定class

说明
当需要应用多个class，可以使用数组语法，给:class 绑定一个数组，应用一个class列表

单纯数组

<style type="text/css">
    .btn {
        padding: 6px 12px;
        font-size: 14px;
        font-weight: normal;
    }
    .btn-default {
        color: #333;
        background-color: #fff;
        border-color: #ccc;
    }
    .active {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        color: #fff;
        background-color: #5cb85c;
        border-color: #4cae4c;
    }
</style>
<div id="app">
    <button class="btn" :class="['btn-default','active']">绑定多个属性</button>
</div>
<script>
    const vm = new Vue({
        el: "#app",
    })
</script>  
<!--渲染之后 -->
<button class="btn btn-default active">绑定多个属性</button>

数组+对象+三则运算

    <style type="text/css">
        .btn {
            padding: 6px 12px;
            font-size: 14px;
            font-weight: normal;
        }
        .btn-default {
            color: #333;
            background-color: #fff;
            border-color: #ccc;
        }
        .active {
            background-image: none;
            outline: 0;
            -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            color: #fff;
            background-color: #5cb85c;
            border-color: #4cae4c;
        }
        .btn-danger {
            color: #fff;
            background-color: #d9534f;
            border-color: #d43f3a;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    注意 class最好加上单引号，否则有可能不能正确渲染-->
    <!--    <button class="btn" :class="['btn-default','active']">绑定多个属性</button>-->
    <!--    不能使用data里的对象,否则不能正确渲染-->
    <button class="btn" :class="[{active: isActive},isDanger ? 'btn-danger':'']">绑定数组</button>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            btnDefault: 'btn-default',
            isActive: true,
            isDanger: true,
        },
    })
</script>
<!--渲染后 -->
<button class="btn active btn-danger">绑定数组</button>

三、用对象的方式实现style绑定

说明
使用v-bind:style="" 或者:style语法，style与class类似，可以给元素绑定内联样式,也有对象语法和数组语法,看起来很直接在元素上写CSS

基本使用

<div id="app">
    <a href="#" :style="{'color':color,'font-size':fontSize + 'px','text-decoration':textDecoration}">绑定内联样式</a>
</div>
<script>
    /**
     * 静态绑定
     */
    new Vue({
        el: "#app",
        data: {
            color: 'red',
            fontSize: 18,
            textDecoration: 'none'
        }
    })
</script>

绑定对象动态修改

<div id="app">
    <a href="#" :style="aStyle"  @mouseover="aMouseOver" @mouseout="aMouseOut">直接使用对象</a>
</div>
<script>
    /**
     * 静态绑定
     */
    new Vue({
        el: "#app",
        data: {
            color: 'red',
            fontSize: 18,
            textDecoration: 'none',
            //    或者
            aStyle: {
                color: 'black',
                fontSize: 18 + 'px',
                textDecoration: 'none',
            },
        },
        methods: {
            aMouseOver: function () {
                this.aStyle.color = 'red'
            },
            aMouseOut: function () {
                this.aStyle.color = 'black'
            }
        }
    })

绑定数组

<div id="app">
<!-- 在实际业务中, :style的数组语法并不常用,因为往往可以写在一个对象里面 -->
    <a href="#" :style="[aBase,aFont]">绑定数组</a>
</div>
<script>
    /**
     * 静态绑定
     */
    new Vue({
        el: "#app",
        data: {
            aBase: {
                color: 'red',
            },
            aFont: {
                fontSize: 16 + 'px',
                textDecoration: 'none',
            },
        },
    })

四 Vue中class与style绑定

一、 用对象的方法绑定class

二、用数组的方法绑定class

三、用对象的方式实现style绑定

一、用对象的方法绑定class