Class 与 Style 如何动态绑定?

Class 与 Style 如何动态绑定?

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

对象语法:

<div v-bind:class="{ active: isActive }"></div>
data: {
  isActive: true
}

数组语法:

<div v-bind:class="[isActive ? activeClass : '']"></div>
data: {
  activeClass: 'active'
}

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

对象语法:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'pink',
  fontSize: 30
}

数组语法:

<div v-bind:style="[styleColor, styleSize]"></div>
data: {
  styleColor: {
     color: 'pink'
   },
  styleSize:{
     fontSize:'23px'
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容