Vue动态绑定Class 与 Style

悠悠 2022-05-21 01:26 377阅读 0赞

Class 可以通过对象语法和数组语法进行动态绑定

  1. <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
  3. data: {
  4.   isActive: true,
  5.   hasError: false
  6. }
  8. <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
  10. data: {
  11.   activeClass: 'active',
  12.   errorClass: 'text-danger'
  13. }

Style 也可以通过对象语法和数组语法进行动态绑定

  1. <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  3. data: {
  4.   activeColor: 'red',
  5.   fontSize: 30
  6. }
  8. <div v-bind:style="[styleColor, styleSize]"></div>
  10. data: {
  11.   styleColor: {
  12.      color: 'red'
  13.    },
  14.   styleSize:{
  15.      fontSize:'23px'
  16.   }
  17. }

发表评论

表情：
评论列表 （有 0 条评论，377人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue class和style绑定

    关于vue中class和style的绑定，我们在本篇主要是为大家说明一下该怎么使用v-bind来进行处理。 首先我们看下class的几种绑定方式： 1.对象语法 通过v

    水深无声水深无声/ 0 赞/ 373 阅读