Vue中实现动态样式的几种方式

1. 三元运算符判断

<text :style="{color:state?'#ff9933':'#ff0000'}">hello world </text>
<script>
export default {
data() {
return {
state: true
    }
  }
}
</script>

2. 动态设置class

2.1 主要运用于：实现循环列表中点击时，相应的元素高亮；（默认首个元素高亮）

<template>
<div class="wrapper" v-for="(item,index) in houseList" :key="index" @click="rightTap(index)">
<div class="houseTitle" :class="{'active' : index === rightIndex}">
      {{item.name}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
rightIndex:0,
houseList:[]
    };
  },
 methods:{
 rightTap(index){
  this.rightIndex = index
      }
   }
 }
</script>
<style lang="scss" scoped>
.wrapper{
 width: 118px;
 height: 60px;
 margin: 6px auto 0 auto;
.houseTitle{
font-size: 22px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
   }
.active{
color:#2a7ffa;
background-color: pink;
  }
}
</style>

2.2 主要运用于：为特定数值设置相应样式；

<div :class="activeId === item.id?'activeStyle':'machineBar'" 
v-for="(item,index) in List" :key="index" @click="clickEvent">
<p>{{item.name}}</p>
</div>

3. 方法判断

3.1 主要运用于：为不同的数据值设置相应的样式；

<template>
<div v-for="(item,index) in houseList" :key="index">             
<div :style="getStyle(item.status)">{{item.name}}</div>    
</div> 
</template>
<script>
export default { 
data(){
return{
houseList:[
        { 
id:1,
name:1,
status:'a'
        },{
id:2,
name:2,
status:'b'
        },{
id:3,
name:3,
status:'c'
        }
      ]
    }
  },
methods:{
getStyle(e){        
console.log('值',e)        
if(e === 'a'){            
return {                
width:'60px',
height:'60px',                
background:'yellow',                 
margin: '10px auto'             
        }        
      }else if(e === 'b'){            
return {                
width:'60px',
height:'60px',                  
background:'red',                 
margin: '10px auto'            
        }        
      }else if(e === 'c'){            
return {                
width:'60px',
height:'60px',                 
background:'pink',                 
margin: '10px auto'             
        }        
      }
    }
  }
}
</script>

3.2 主要运用于：在元素多从事件下，显示相应的样式；

<template>
<div 
class="homeWrap" :class="{'select': selected === 1,'click': clicked === 1}" 
@click="handleClick(1)" @mousedown="menuOnSelect(1)">
     主页
</div>   
</template>
<script>
export default {
return {
selected: 0,
clicked: 0
  }
methods:{
menuOnSelect(value){
this.selected = value;
    },
handleClick(value){
this.selected = 0
this.clicked = value
    }
  }
 }
</script>
<style lang="stylus" scoped>
.homeWrap.select 
background red
.homeWrap.click 
background yellow
</style>

4. 数组绑定

<div :class="[isActive,isSort]"></div>
// 数组与三元运算符结合判断选择需要的class
<div class="item" :class="[item.name? 'lg':'sm']"></div>
<div class="item" :class="[item.age<18? 'gray':'']"></div>
// 数组对象结合
<div :class="[{ active: isActive }, 'sort']"></div>

data() {
  return{
    isActive:'active',
    isSort:'sort'
 }
}
// css
.active{
    /*这里写需要设置的第一种样式*/
  } 
.sort{
    /*这里写需要设置的第二种样式*/
  }

5. computed结合es6对象的计算属性名方法

<div :class="classObject"></div>
<script>
  export default {
    data(){
      return{
        isActive:true
      }
    },
    computed:{
      classObject() {
        return{
          class_a:this.isActive,
          class_b:!this.isActive
        //  这里要结合自身项目情况修改填写
        }
      }
    }
  }
</script>
// css
.class_a{
    /*这里写需要设置的第一种样式*/
}

.class_b{
   /*这里写需要设置的第二种样式*/
 }