Vue 中的样式绑定

栏目: JavaScript · 发布时间: 5年前

内容简介:在开发的过程中,难免会给现在有这样一个想法,

class 的对象绑定

在开发的过程中,难免会给 dom 元素添加一些样式,在 Vue 之中我们该如何绑定样式呢?

现在有这样一个想法, div 被点击一次,变成红色,当再次被点击时,恢复为默认的颜色, 再点击一次又变成红色,想实现这样的操作,如果凭借以前对 Vue 的了解,好像是没有办法实现的,因为我们很难想到数据如何和样式进行绑定,Vue 是面向数据的一种编程方式,它不在是直接操作 dom 的编程方式了,所以呢,我们希望某些数据和样式做一个关联,数据一变,样式就会变:

<div id="app">
    <div @click="handleDivClick"
        :class="{activated: isActivated}"
    >Hello world</div>
</div>
 let vm = new Vue({
    el: '#app',
    data: {
        isActivated:false,      //初始化时,这个值为 false,所以 activated 肯定不会显示
    },
    methods: {
        handleDivClick(){
            this.isActivated = true
        }
    }
 })

dom 里面只要有 : 的地方都是 js 的表达式,这里面 :class 的意思是: Hello World 这个 div 有个 class 值为 activated ,它到底现不显示,取决于 data 里的 isActivated 这个变量是 true 还是 false 。这里面初始化时,这个值为 false ,所以 activated 肯定不会显示。

当我点击时,我希望将这个 class 展示出来,只需将 isActivated 值变成 true ,数据变化,页面恰好通过 :class 和数据进行了绑定,所以 isActivated 值变为 true 时,前面样式的名字就会显示在页面上,通过这个功能就能实现,点击一次变红的效果。

那如何实现再点击一次变成默认颜色呢?只需对这个值取反就行了。

handleDivClick(){
    this.isActivated = !this.isActivated    //这里不让它等于 true,而是对这个值进行取反
}

这就是借助 class 和对象的形式实现数据和样式的绑定,称作为 class 的对象绑定。

class 的数组绑定

<div id="app">
    <div @click="handleDivClick"
        :class="[activated]"
    >Hello world</div>
</div>
 let vm = new Vue({
    el: '#app',
    data: {
        activated: ''   //初始化时,activated 为空,所以 class 肯定是没有值的。
    },
    methods: {
        handleDivClick(){
            this.activated = 'activated'
        }
    }
 })

:class 那边不在是一个对象了,取而代之我去写一个数组,在数组里面呢,我写个 activated ,这个时候它指的是啥呢,应该这么去读 Hello world 这个 div 上的 class ,这个 class 是什么呢?它显示的是 activated 这个变量里的内容。

初始化时, activated 为空,所以 class 肯定是没有值的。通过这种写法,我想把 Hello world 样式置红,应该怎么写呢?只需将 activated 这个变量由空字符串改变为 'activated' ,就可以了,这样 div 标签上就会有个值为 activatedclass

那当我点击第二下时,页面会变成默认颜色吗?很显然是不会的,那要怎么实现呢?只需做一个简单的判断

handleDivClick(){
    if(this.activated === 'activated'){
        this.activated = ''
    }else{
        this.activated = 'activated'
    }
}

上面这样写呢,代码有点冗余,可以用一个三元表达式来代替:

handleDivClick(){
    this.activated = this.activated === 'activated' ? '' : 'activated'
}

这里是借助 class 和数组相绑定,这个数组代表的是什么呢?它代表的是一个变量, class 上会显示这个变量的内容。

既然 class 是一个数组,就可以定义多个变量, :class="[activated,activatedOne]"

通过这两种方式,我们可以动态的向一个 dom 元素上,添加或删除不同的 class ,从而实现页面效果的一个变更,

style 改变 dom 样式

讲到这里,你是不是会想,我可以不可以通过改变 style ,来改变页面的样式,显然是可以的。那如何来实现呢?

<div id="app">
    <div @click="handleDivClick" 
        :style="styleObj"
    >hello world</div>
</div>
let vm = new Vue({
    el: '#app',
    data: {
        styleObj: {
            color: 'black'            //这种写法是,div 有一个内联样式,内容是 color: black
        }
    },
    methods: {
        handleDivClick(){
            this.styleObj.color = this.styleObj.color === 'black ? 'red' : 'black'
        }
    }
})

内联样式有两种定义方式,一种是和数组绑定,一种是和对象绑定。

:style="styleObj" 看到 : 就会想到这是一个指令,后面的 styleObj 一定是一个 js 表达式,它对应的就是数据的一项。应该怎么写呢?

styleObj: {
    color: 'black'            //这种写法是,div 有一个内联样式,内容是 color: black
}

这种写法是, div 有一个内联样式,内容是 color: black

当我点击 div 时,要改变它颜色,该怎么实现,其实是和上面改变 class 的方法是一样的。

methods: {
    handleDivClick(){
        this.styleObj.color = this.styleObj.color === 'black ? 'red' : 'black'
    }
}

这是用 style 对象绑定,那要是用数组绑定呢?用数组绑定,可比对象简单多了。

:style="[styleObj,{fontSize:'20px'}]"       //可以直接挂在对象,也可以用一个变量,对象中如果出现连字符的,用驼峰的形式表示,值要是字符串

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UML风格

UML风格

布格勒 / 袁峰 / 2008-12 / 35.00元

《UML风格(第2版)(英汉对照)》给出了一系列有效提高团队生产效率的编程风格的原则,描述了创建简洁、易于理解的UML图的标准和指南,涉及类图、定时图、用例图、组合结构图、顺序图、交互概览图、活动图、对象图、状态图、包图、通信图、部署图和组件图等内容。著名UML专家Scott W.Ambler描述了创建UML图的标准和指南,以帮助建模人员创建简明而易于理解的UML 图形。 《UML风格(第2......一起来看看 《UML风格》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具