Vue中样式--class/style

第一种:

传递一个数组，这里的class需要使用v-bind的数据绑定;

<h2 :class="['red', 'size']">hello</h2>

第二种:

在数组中使用三元表达式;

<h2 :class="['red', 'size', flag?'active':'']">hello</h2>
    

data() {
  return {
       flag:true 
   }}

第三种:

在数组中使用对象来代替三元表达式，来提高代码的可读性;

<h2 :class="['thin', 'italic', {'active':flag} ]">hello</h2>

在为class使用v-bind绑定对象时候，对象的属性是一个类名，由于对象的属性可以带引号，也可以不带，属性的值是一个标识符;

<h2 :class="classObj">hello</h2>
    
 data() {
  return {
       flag:true ,
      classObj:[red:true,size:true,acitve:true]
   }}

---

vue中样式是动态绑定style,对象是不需要键值对的集合。

第一种:

直接在标签上使用

<h2 :style="{color:'red'}">hello</h2>

第二种:

将键值对的对象写在data中，直接的动态绑定;

<h2 :style="styleObj1">hello</h2>
    

 data() {
  return {
       flag:true ,
       classObj:[red:true,size:true,acitve:true],
       styleObj1:{color:'red',font-size:24px}
   }}

第二种:

多个键值对对象，使用数组方式，依次写入;

<h2 :style="[ styleObj1, styleObj2 ]">hello</h2>
    

data() {
  return {
       flag:true ,
       classObj:[red:true,size:true,acitve:true],
       styleObj1:{color:'red',font-size:24px},
       styleObj2:{background:'green'}
   }}

 

__EOF__

本文作者：长安
本文链接：https://www.cnblogs.com/jingxin01/p/16413908.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！