当前位置:首页 > vue.js > 正文内容

vue class style写法

自由小鸟6年前 (2018-08-15)vue.js4216

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>


版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=21

“vue class style写法” 的相关文章

vue3

vue3

安装vite?-Vite是vue作者开发的一款意图取代webpack的工具,其实原理是利用ES6的import会发送请求加载文件的特性,拦截这些请求,做一些预编译,省去webapck沉长的打包时间安装:npm install -D create-vite-app利用vite创建 vue3项目cre...

vue 公告滑动效果

vue 公告滑动效果

适应只显示一条 <div class="marquee_box"> <ul class="marquee_list" :class="{marquee_top:animate}"> &l...

vue 时间戳转今天,昨天,以前时间

filters:{ formatDate(date) { const lastDate = new Date(date); lastDate.setHours(0); lastDate.setMinutes(0); lastDate.setSecon...

vue render

vue render

let element={ tagName:'ul',//节点标签名 props:{//dom的属性,用一个对象存储键值对 id:'list' }, children:[//该节点的子节点...