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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值