一、 绑定class

1. 第一种:样式和数据的绑定,通过对象方式{ }

v-bind:class设置一个对象。当isActivated为true的时候,div上会增加一个class属性,属性名称为activated,如果再在css里加上activated类的样式,则会有CSS效果了;如果isActivated为false,则没有class属性。在函数中使当前状态取反做到来回切换。
Vue的样式绑定

2.第二种方式:通过数组方式,v-bind:class设置一个数组。

class里面存放的是一个数组,我们最开始在data中将activated置为空,在点击时,减少冗余用下面的三元表达式,如果this.activated等于activated,再次置空,如果不等于activated,就赋值为activated。

Vue的样式绑定

二、绑定style

1. 通过对象方式{ }。

在元素div的style内联样式上添加一个StyleObj对象,在data中添加对应的对象,然后通过methods里的方法来改变对象的值,从而渲染页面。

Vue的样式绑定

2. 通过数组方式[ ]。

数组语法的意思是如果v-bind:style后面是一个数组,那么我这个样式就由数组里面的对象来决定

Vue的样式绑定

总结:无论通过style绑定还是class绑定,都有对象和数组两种方式。

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-12-24
  • 2022-12-23
  • 2022-12-23
  • 2021-06-09
  • 2022-12-23
  • 2019-03-20
猜你喜欢
  • 2022-12-23
  • 2021-09-08
  • 2021-07-10
  • 2022-01-08
  • 2021-10-26
  • 2021-12-28
  • 2022-01-13
相关资源
相似解决方案