码迷,mamicode.com
首页 > 其他好文 > 详细

class和style属性

时间:2019-03-17 12:16:45      阅读:613      评论:0      收藏:0      [点我收藏+]

标签:key   建议   div   ase   red   切换   值类型   lse   sso   

值类型:

1、表达式计算出的字符串结果或者字符串。

2、对象(表达式或者对象名,建议采用对象名)

key为className,值的真假控制这个name的有无。

//class
<div v-bind:class="classObject"></div>
data: {
  classObject: {//或者在计算属性里,在切换class里比较常用
    active: true,
    ‘text-danger‘: false
  }
}

//style
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: ‘red‘,
    fontSize: ‘13px‘
  }
}

3、数组

一般使用对象,数组不好处理计算。

4、指令class与普通class属性共存

<div
  class="static"
  v-bind:class="{ active: isActive, ‘text-danger‘: hasError }"
></div>

data: {
  isActive: true,
  hasError: false
}
//渲染结果
<div class="static active"></div>

 

class和style属性

标签:key   建议   div   ase   red   切换   值类型   lse   sso   

原文地址:https://www.cnblogs.com/yaoyao-sun/p/10542159.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!