Vue实现动态样式的多种方法汇总

目录

1. 三元运算符判断2. 动态设置class
3. 方法判断
4. 数组绑定5. computed结合es6对象的计算属性名方法

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

以上就是Vue实现动态样式的多种方法汇总的详细内容，更多关于Vue实现动态样式的资料请关注其它相关文章！