最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

Vue第十一节:动态绑定class和style

Vuejs rockyxia 3048浏览

写在前面

在第六节《教你如何在html中绑定数据》的章节中,我们学会了如何给视图上的html标签绑定属性。

比如,给 <a> 标签绑定href属性,简单回忆一下:

<!-- v-bind指令 -->
<a v-bind:href="link"></a>

<!-- v-bind的缩写 -->
<a :href="link"></a>

我们用 v-bind 指令(以后都用缩写的形式)来动态绑定一个标签的属性。

而这一节,我们特意来学习一下样式的动态绑定,因为它与普通属性的绑定略有不同,并且在实际开发中,动态绑定样式是一定会用到的知识,所以,还是值得我们用一个章节来学习一下它。

老办法,我们先来准备一个vue实例:

<div id="app">
  <p>这是文字</p>
</div>
<script>
  //创建一个实例vm
  const vm = new Vue({
    el:"#app",
    data:{}
  });
</script>

绑定class

对象语法:我们动态绑定的class的值是一个对象{ },具体怎么写我们来看看,在上面的代码上稍做修改:

<div id="app">
  <p :class="{'active':isActive}">这是文字</p>
</div>
<script>
  //创建一个实例vm
  const vm = new Vue({
    el:"#app",
    data:{
      isActive:true
    }
  });
</script>

我们看到给class绑定的是一个对象:{ 'active' : isActive }isActive是我们vm实例的数据,值为true,这与我们平时看到的class是一个字符串值不一样,这种写法,最后会被渲染成什么样呢?

我们运行看看渲染后的效果:

咦?class的值最后被渲染成:“active”,原来,在对象中,若该属性对应的value为true,则该属性会被渲染出来,为false,则被渲染出来。

我们尽快验证一下,我们在上面的代码上再稍作修改:

<p :class="{
  'active':isActive,
  'danger':isDanger,
  'error':isError
}">这是文字</p>

我们给class绑定的对象多了2个key和value,我们看看实例的数据data:

data:{
  isActive:true,
  isDanger:true,
  isError:false
}

isActiveisDanger的值都为true,isError都为false,猜一下,渲染出来的结果是什么?

看效果:

正和我们所预测的一样,值为true的会被成功渲染出来,为false的则不会被渲染出来。这个时候,你就可以根据需要给渲染出来的class编写样式了。

一旦vm实例对应的数据发生变化,比如isActive的值由true变成false,视图上的’active’ 类也会被删除,这样就会实现动态绑定样式啦!

除了对象语法来绑定class之外,我们还有另一种写法。

数组语法:用数组语法和对象语法来绑定class,又稍有不同。说了是数组语法,那写法就肯定不一样,我们继续来看看:

<p :class="[activeClass,errorClass]">
  这是文字
</p>

这个时候,class绑定的值就是一个数组了,数组有两个元素[ activeClass , errorClass ],它们对应的值是vm实例的数据data,我们看看vm的数据data:

data:{
  activeClass:'active',
  errorClass:'error'
}

渲染的时候,activeClasserrorClass对应的值就会被渲染成class。看效果图:

效果跟我们预期一样。这样,我们就可以修改vm实例的数据data,来实现动态修改class的样式了。

绑定内联样式style

除了使用class类以外,我们还可以在style内联样式上下功夫。

绑定内联样式也有2种语法,对象语法和数组语法,但我们这里只介绍常用的对象语法。

<p :style="{color:colorStyle}">
  这是文字
</p> 

这个时候,我们绑定的就不是class了,是style属性。它的值是一个对象:{ color:colorStyle },同样,我们来看看vm实例的数据data:

data:{
  colorStyle:'red'
}

原来colorStyle我们vm实例的数据,值为red。那是不是我们style中的color对应的颜色是就是red呢?

没错,看来你已经会举一反三了。 看渲染效果,我们验证一样:

没毛病,成功渲染成:style=”color:red”。

因此,我们同样可以修改vm实例的数据data,来实现动态修改视图央视的效果。

本节小结

采取动态绑定class还是动态内联样式style,这个要根据需求分析来具体确定。但较为常用的还是使用绑定class。

本系列教程来自 web前端教程 微信公众号。

转载请注明:Rockyxia Web技术博客 » Vue第十一节:动态绑定class和style
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)