跟着官档学 Vue.js (六) - Class 与 Style 绑定

通常我们在写网页的时候,都离不开用标签上的 class 属性 或者 style 属性 来控制某个元素的样式。

通通常,我们会利用 js 来控制某些样式的变化。

我们之前学过,可以利用 v-bind 来绑定标签的属性。鉴于上面说到的东西有这么“通常”,所以 vue 还专门增强了对这两者的绑定呢。

绑定 html class

假设我们还没看这一章,我们可以试着就用 v-bind 来给页面上的元素绑定一个类:

<style>
    .one{
        color: red;
    }
    .two{
        background: blue;
    }
</style>
<div id="example">
    <p :class="style">hello</p>
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        style: 'one two'
    }
});
</script>

页面效果:

上面的使用是没有任何问题的。甚至可以在浏览器控制台输入下面代码以控制元素到底要拥有哪些类:

vm.style='one'

但是随着我们代码复杂性的增加,也许有5个类:

vm.style='one two three four five'

有一天,我不要 two 然后要多一个 six。那我们就必须执行这样的代码:

vm.style='one three four five six'

艾玛。。想想就觉得麻烦,而且也难以维护。所以 vue 就增强了关于这个 class 的绑定。

对象语法

关于 插值,我们在第四章的时候就已经讲过了,如果要为某一个绑定的属性插值,插值的内容无例外的话,只接受单一的 JavaScript 表达式

但在这里,我们可以使用 JavaScript 对象 进行插值:

<div v-bind:class="{ active: isActive }"></div>
<!-- '{ active: isActive}' 就是一个对象 -->

官方的文档里面,已经给了我们一个例子。我们这就把它用在我们前面的例子里:

<style>
    .one{
        color: red;
    }
    .two{
        background: blue;
    }
</style>
<div id="example">
    <p :class="{one:hasOne,two:hasTwo}">hello</p>
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        hasOne: true,
        hasTwo: false
    }
});
</script>

现在显示出来的效果是这样的:

你们会发现,在 vue 实例的 data 里面我定义了两个布尔变量:hasOnehasTwo,并对他们赋予了初始值。

从显示效果来看,显然值为 true 的类才会被显示出来。

所以总结一下对象语法,就是这样的一个格式:

{ 类名: 某布尔值, 类名2: 某布尔值, ... }

为了让 html 代码看起来更简洁,还可以直接把对象写在 data 之中:

<div id="example">
    <p :class="final">hello</p>
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        final: {one:true,two:false}
    }
});

这样子写之后,可以在控制台输入 vm.final.one 来修改真值情况。

源文档中提到说,v-bind:class 指令与 普通的class 属性可以并存:

<div class="static"
     v-bind:class="{ active: true, 'text-danger': false}">
</div>

渲染为:

<div class="static active"></div>

这样子的话就可以把一些不会变动的样式写死在一个类里面。节省了一个变量的内存空间呢~

数组语法

在 class 内插值,除了使用 对象 之外,我们还可以使用 数组 进行插值。

我在看文档的时候,一直在比较数组语法和对象语法之间到底有什么区别和优劣之分。看了许久得出了一个结论,数组语法和对象语法就是两种不同的表现形式而已,没有什么优劣之分。反正喜欢用哪一种就哪一种。

写到后来又总结,数组语法倾向于分类,对象语法倾向于决定某个类是否要存在。

所谓数组,那在这个语法里,数组的每一个元素是代表什么呢?用我的例子:

<div id="example">
    <p :class="[hi,hello]">hello</p>
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        hi: 'one two',
        hello: 'three'
    }
});
</script>

渲染为:

<div id="example">
    <p :class="one two three">hello</p>
</div>

数组的每一个元素,代表着一个或者一串类名

利用这一点,可以为那些样式进行分类。(就例子来说我把它分成了 hi 和 hello 两类。真鬼畜)

然后,两种语法是可以进行嵌套的:

<div id="example">
    <p :class="[hi,hello]">hello</p>
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        hi: {
            one: true,
            two: false
        },
        hello: 'three'
    }
});
</script>

无论是 数组语法 还是 对象语法 ,我们上面的例子都是把数据写在了 vue 实例的 data 中,除此之外我们还可以写在 计算属性computed 中来实现更自由的效果,这种情况下, computed 要返回的计算结果是 数组 或者 对象

<div id="example">
    <p :class="some">hello</p>
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        hi: {
            one: true,
            two: false
        },
        hello: 'three'
    },
    computed:{
        some: function(){
            return {
                one: true,
                two: false
            }
        },
        other: function(){
            return [this.hi,this.hello]
        }
    }
});
</script>

绑定内联样式 / html style

在 html 中写内联样式就和在 css 中写样式的格式是很相像的。vue 也提供了 对象语法数组语法 来为 style 插值。

对象语法

和上文中插值 class 所使用的对象不同的是,插值内联样式中,对象的值就是某个样式属性的值。

(怎么这么绕口,写出代码来!)

<div v-bind:style="{ color: activeColor, fontSize: fS + 'px' }"></div>
<!--其中 activeColor 和 fS 定义在了 vue 实例的 data 中-->

官方的例子如上,我们可以总结出,对象的语法如下:

{样式属性: 值, 样式属性2: 值}

我们会留意到,上面这个例子中 字体大小 用的是 fontSize 而不是平常我们所写的 font-size。vue 其实两种写法都支持。但如果要书写 font-size,那一定要加上引号:{'font-size':'50px'}

上一个叫你留意的点里面,还有另外一个需要留意的点,就是千万不要写成 {'font-size': 50px },值是字符串,要用引号括起来。

一旦我们这样内联写出来的样式太多了,就会显得 html 很臃肿。那么我们可以直接把这个对象写在 data 或者 你懂的computed 中:

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

这样看起来是不是就简洁很多呢~

该加单位的值还是要加单位,vue 可不会帮你补充单位。

数组语法

<div v-bind:style="[baseStyles, overridingStyles]">

看到上面的对象可以直接写在 data 里,又看到 数组语法 的每个数组元素就是对象。想想就觉得厉害了,完全可以在 js 里面实现 css 模块化了都。。。

对了,stylev-bind:style 也是可以并存的。

最后,官档还说了,会为某些 css 属性 自动添加前缀。 也就是说我们不用去考虑某些属性的前缀问题啦~真方便2333

  vue.js