:class=" { ‘classA’ : f,‘classB’:g } " //条件f成立则使用style标签中定义好的classA样式,条件g成立则使用classB样式
:class=“[isState==true?‘text’:‘text1’]” //isState是true样式是text,是false这是text1
- 使用style设置某个变量的值
:style=“{‘width’:widthLength+‘px’}” //给width一个变量值widthLength
- 使用计算属性calc(100% - 100px)
一般只能计算宽度高度,注意中间的减号“-”,前后一定要加空格,并且父级的高度宽度一定要有,可以100%,否则使用无效。
- 使用函数绑定样式:
:style=“{‘color’:formateTitleColor(val)}”
//格式化标题颜色
formateTitleColor(val){
if(val<24 && val>=0){
return ‘#f7b13f’
}
if(val>=24){
return ‘#000’
}
if(val<0 ){
return ‘#f5616f’
}
}
二、全局公共css样式文件
=============
提醒:vue工程中css文件和js文件最好都放在static文件夹下面,可以降低报错的概率。
2.1 main.js中引入
在入口js文件main.js文件中引入。
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import ElementUi from ‘element-ui’
import ‘…/common/mainStyle.css’ //引入全局样式
Vue.config.productionTip = false
Vue.use(ElementUi);
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App)
}).$mount(‘#app’);
2.2 index.html引入
三、单个vue文件中引入样式
==============
vue文件style标签中import引入样式:
@import “…/assets/common/common.css”;//自定义.css的样式路径
四、样式作用范围控制
==========
很多时候,我们希望样式只在当前组件生效,样式可以私有化,避免影响其他的组件,造成全局的样式污染。
4.1 scoped私有作用域
在style标签中添加scoped属性,可以使样式只在当前的组件中生效,样式私有化。
原理:
其原理是在编译的时候,会给每个组件中的所有的dom节点样式添加一个唯一的data属性。
4.2 混合使用
在一个组件中同时使用scoped和非scoped样式。特别是对第三方组件样式的修改,想修改第三方组件的样式,又不想去掉scoped属性,影响别的组件。