3-6#去哪儿网app#vue中的样式绑定

0.引言

样式即CSS

样式绑定的两种方式：①在div中(以div标签为例)绑定class  ②在div中绑定style

而这两种方式中又都分为对象或数组的方式

注：不论哪种方法，都是在V层的标签里使用v-bind:指令

1.1 class后跟对象{}

<style>
    .activated {
        color: red;
    }
</style>

<div id="app">
    <div @click="handleDivClick" :class="{activated: isActivated}">Hello world</div>
    <!-- :class后面跟一个对象{activated: isActivated}意思是：div上绑定类，是否绑定了activated取决于isActivated为true or false， -->
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            isActivated: false
        },
        methods: {
            handleDivClick: function() {
                // this.isActivated = true
                this.isActivated = !this.isActivated; // 取反思想
            }
        }
    })
</script>

需要注意的问题：

① :class后跟对象里的格式{A:B}，A是类名，B是布尔值

② 点击事件函数中设置不停切换的思想是：取反  

this.isActivated = !this.isActivated

1.2 class后跟数组[]

CSS代码不变，V层和M层如下：

<div id="app">
    <div @click="handleDivClick" :class="[activated]">Hello world</div>
    <!-- 绑定class的另一种写法：数组，由data里的 activated 变量决定-->
    <!-- <div @click="handleDivClick" :class="[activated,anotherName]">Hello world</div> -->
    <!-- 补充：class数组里可以添加多个变量，第一个为空则找下一个 -->
</div>

 

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            activated: "",
            anotherName: "another-name"
        },
        methods: {
            handleDivClick: function() {
                // if (this.activated === "") {
                //     this.activated = "activated";
                // } else {
                //     this.activated = "";
                // }
                // 不同于上个方法中 对象的形式，在上个方法中，巧妙运用布尔值，而在这里只能条件判断,也可用三元表达式：
                this.activated = this.activated === "activated" ? "" : "activated";
                //优先级：先 === 再？： 再=
            }
        }
    })
</script>

需要注意的问题：

① div中[activated]是一个变量，可以不是类名，比如写[ABC]也可以，相应的下面的data中的键名也要改，还有三元表达式中也要改为this.act

② 如代码注释中所说，数组中可以放多个元素，即添加多个类，但要相应的在data中也要对应，在渲染的时候，依次添加类。data中的键对应的值不为空，则添加该类。

2.1 style后跟对象{}

<div id="app">
    <div :style="styleObj" @click="handleDivClick">Hello world</div>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            styleObj: {
                color: "blue"
            }
        },
        methods: {
            handleDivClick: function() {
                this.styleObj.color = this.styleObj.color === "black" ? "blue" : "black";
                // 依然用三元表达式
            }
        }
    })
</script>

需要注意的问题：

①与class方法中data不同，在style方法中，data里再嵌套一层styleObj对象

2.2 style后跟数组[]

唯二区别：

①:style="styleObj" 改为 :style="[styleObj]" ，即多了一个中括号，M层的JS代码不变

②和class的数组一样，style的数组也可以添加多个元素，此时M层也不用变化

V层代码：

<div id="app">
    <!-- <div :style="styleObj" @click="handleDivClick">Hello world</div> -->
    <!-- <div :style="[styleObj]" @click="handleDivClick">Hello world</div> -->
    <!-- 可以看出两种方法的区别只是 用数组的时候 V层的styleObj加了中括号，下面M层内容不变 -->
    <!-- 使用数组的时候，还可以添加另外的元素 如下 -->
    <div :style="[styleObj,{fontSize: '20px'}]" @click="handleDivClick">Hello world</div>
</div>