Vue.js 的核心是一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步，每当数据有改动，相应的DOM视图也会更新。基于这种特性，通过vue.js动态绑定class就变的容易。
一. 动态改变class的几种方式
思路：以某一页面样式需要单独适配iphonex为例
方式一.对象的形式（第一个参数 类名， 第二个参数：boolean值） :class="{'footer':isIphoneX}"
//某一页面适配iPhone X
<div class="bottom" :class="{'footer':isIphoneX}">
</div>
data () {
return {
isIphoneX:false
}
},
mounted () {
if(window.screen.width==375&&window.screen.height==812){
this.isIphoneX = true
}渲染后的HTML:<div class="bottom footer"></div>
方式二.三元表达式(放在数组中，类名要用引号) :class="[isIphoneX ? 'bottom' : 'footer']"
<div :class="[isIphoneX ? 'bottom' : 'footer']">
</div>
渲染后的HTML:<div class="footer"></div>
方式三.动态数组里的变量 :class="[isTrue, isFalse]"
<div :class="[{'footer':isIphoneX} , 'bottom']"></div>
渲染后和方法一是一样的。vue数据和class都符合双向绑定的规则！
二.动态改变内联样式:style
熟悉了以上动态绑定:class的语法后，很容易理解内联样式:style，下面以选项卡的为例
第一种:style的直接使用
<template>
<div class="contain">
<div v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)" class="title">
<a href="java:;" style="color: white;background:yellow">{{item.name}}</a>
</div>
</div>
</template>
第二种:单个属性
<a href="java:;" :style="{color:selColor}">{{item.name}}</a>
data(){
return {
selColor:'white',
}
}
第三种：驼峰写法
<a href="java:;" :style="{'text-align':textAlign,fontSize: fontSize + 'px'}">{{item.name}}</a>
data(){
return {
textAlign: 'center',
fontSize: 18,
}
}
'text-align' 或 fontSize//这里用引号也可用驼峰式
第四种:对象形式
<a href="java:;" :style="styleObj">{{item.name}}</a>
data () {
return {
styleObj:{
display: 'inline-block',
'text-align': 'center',//这里用引号也可用驼峰式
background: 'red',
fontSize: '14px',//这里用引号也可用驼峰式
color: 'gold',
},
}
}
第五种:style的三元表达式
//选项卡是否选中，选中后改变样式
<template>
<div class="contain">
<div v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)" class="title">
<a href="java:;" :style="{'color':selIdx==index?'black':'white'}">{{item.name}}</a>
</div>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
selIdx:0,
selColor: 'white',
headerList: [
{name: '首页1'},
{name: '首页2'},
{name: '首页3'},
{name: '首页4'},
{name: '首页5'}
]
}
},
methods: {
selectMainTheme: function (index)
this.selIdx = index
}
}
}
</script>
注:如果style属性中带有中划线-，例如：font-size、background-color等等时，必须用驼峰写法或者是引号引起来，否则在渲染时会出错！
文章独发金蝶云社区
推荐阅读