vue class style写法

原创 自由小鸟  2018-08-15 12:29:56  阅读 1821 次 评论 0 条

class,


第一种就是把判断的变量放在后面,前面就是判断之后要设置的class名称

v-bind:class="{ active: isActive, 'text-danger': hasError }">

data: {
 isActive: true,
 hasError: false
}
结果就是<div class="active"></div>

第二种,和第一种得到的结果是一样的

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

第三种

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

第四种,可以是数组的形式

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
结果就是 <div class="active text-danger"></div>


第五种,三元来判断

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>


第六种,数组语法中使用对象

<div v-bind:class="[{ active: isActive }, errorClass]"></div>



style,后面就是{对象}

v-bind:style="{ 'width':item.isActive?'100%':''}"

最前面写上设置的属性名,后面就用三元判断来判断放哪个值


第二种

<div id='app' :style="diaphaneity">555</div>new Vue({
  el: "#app",
  data: {
      editableCheckNum: 0
  },
  computed: {    // a computed getter
    diaphaneity: function () {        // 若为0
        if(!this.editableCheckNum) {            // 50%透明度
            return 'opacity: 0.5';
        }        // 否则不添加样式
        return '';
    }
  }
})

第三种

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

第四种 直接给个样式对象会更加的清晰

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

第五种,可以直接是多个数组值

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

第六种 可以将多个样式对象应用到同一个元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>


本文地址:https://webge.net/?id=21
版权声明:本文为原创文章,版权归 自由小鸟 所有,欢迎分享本文,转载请保留出处!

评论已关闭!