一、VueStyle绑定
在Vue中使用VueStyle可以很方便地实现样式的绑定,可以绑定到class
和style
上,只需要在需要应用样式的元素上加上v-bind
指令,绑定一个对象即可:
<div v-bind:class="{ active: isActive }"></div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
其中,isActive
、activeColor
、fontSize
都是data
里的属性,样式会随着属性的变换而动态改变。
除了对象绑定,还可以使用数组绑定多个class
:
<div v-bind:class="[activeClass, errorClass]"></div>
其中,activeClass
和errorClass
都是data
里的属性,可以为class
添加多个样式。
二、VueStyle绑定方法
除了对象和数组绑定,还可以使用方法绑定,将复杂逻辑抽离出来,在方法中返回需要绑定的对象或数组:
<div v-bind:class="classObject"></div>
<div v-bind:class="getClass"></div>
其中,classObject
和getClass
都是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
方法中,根据数据返回需要绑定的样式,示例中active
和text-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>
当isActive
为true
时,绑定activeColor
属性,否则绑定一个空值,样式动态改变。
五、VueStyle判断
在Vue中还可以使用v-if
、v-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>
bgColor
是data
中的属性,随着属性值的变化,绑定的样式也会发生变化。
十、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-loader
、babel-loader
和css-loader
进行加载。