VueStyle详解

发布时间:2023-05-18

一、VueStyle绑定

在Vue中使用VueStyle可以很方便地实现样式的绑定,可以绑定到classstyle上,只需要在需要应用样式的元素上加上v-bind指令,绑定一个对象即可:

<div v-bind:class="{ active: isActive }"></div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

其中,isActiveactiveColorfontSize都是data里的属性,样式会随着属性的变换而动态改变。 除了对象绑定,还可以使用数组绑定多个class

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

其中,activeClasserrorClass都是data里的属性,可以为class添加多个样式。

二、VueStyle绑定方法

除了对象和数组绑定,还可以使用方法绑定,将复杂逻辑抽离出来,在方法中返回需要绑定的对象或数组:

<div v-bind:class="classObject"></div>
<div v-bind:class="getClass"></div>

其中,classObjectgetClass都是methods里的方法:

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
},
methods: {
  getClass: function () {
    return [this.activeClass, this.errorClass]
  }
}

classObject方法中,根据数据返回需要绑定的样式,示例中activetext-danger都可以动态变换。getClass方法返回一个绑定多个样式的数组。

三、VueStyle设置

在Vue中可以定义全局样式:

Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

使用时只需在组件中添加myOption属性即可:

Vue.component('my-component', {
  myOption: 'hello!'
})

四、VueStyle动态写法

Vue中除了静态绑定,还可以动态绑定样式:

<div :style="{ 'background-color': isActive ? activeColor : '' }"></div>

isActivetrue时,绑定activeColor属性,否则绑定一个空值,样式动态改变。

五、VueStyle判断

在Vue中还可以使用v-ifv-show等指令判断是否显示某个样式,v-if自带动态创建和销毁组件的能力,而v-show仅仅是用CSS设置display属性。

<div v-if="classObject"></div>

六、VueStyle背景图片路径怎么写

在Vue中,如果要绑定背景图片地址,需要使用require方法将图片路径引入:

<div :style="{ backgroundImage: 'url(' + require('./assets/img/bg.jpg') + ')' }"></div>

七、VueStyle写变量

可以通过定义变量将样式抽象出来,便于灵活应对:

<div :class="[className]"></div>

data里定义className变量,再通过computed将其转化为需要绑定的样式:

data: {
  className: 'test'
},
computed: {
  getClass: function() {
    return this.className;
  }
}

八、VueStyle如何导入CSS文件

在Vue中使用方式多样,可以将CSS文件通过<link>标签直接引入,也可以通过import引入:

<link rel="stylesheet" type="text/css" href="main.css">
import './assets/css/main.css';

九、VueStyle动态绑定

VueStyle动态绑定需要使用v-bind指令:

<div v-bind:style="{'background-color': bgColor }"></div>

bgColordata中的属性,随着属性值的变化,绑定的样式也会发生变化。

十、VueStyle loader 顺序选取

在Vue打包时,需要选取和加载一些loader,可以按以下顺序配置:

module: {
  rules: [
    // 1. vue-loader
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    // 2. babel-loader
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /(node_modules|bower_components)/
    },
    // 3. css-loader
    {
      test: /\.css$/,
      use: [
        'vue-style-loader',
        'css-loader'
      ]
    }
  ]
}

分别选取vue-loaderbabel-loadercss-loader进行加载。