综合编程

Vue 中的样式绑定

微信扫一扫,分享到朋友圈

Vue 中的样式绑定
0

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
标签上就会有个值为 activated
class

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

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'}]"       //可以直接挂在对象,也可以用一个变量,对象中如果出现连字符的,用驼峰的形式表示,值要是字符串
阅读原文...

微信扫一扫,分享到朋友圈

Vue 中的样式绑定
0
SegmentFault博客

Please Stop Building Inaccessible Forms (and How to Fix Them)

上一篇

In the Daily: BCH Charity Anniversary, Lighting Wholesaler Takes Crypto, Atomicpay Vanity URLs

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Vue 中的样式绑定

长按储存图像,分享给朋友