目錄

• 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,www.cppcns.com
 
	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,s程式設計客棧tatus:'c'
        }
      ]
    }
  },methods:{
    getStyle(e){        
      console.log('值',e)        
      if(e === 'a'){            
        return {                
          width:www.cppcns.com'60px',height:'60px',background:'yellow',margin: '10px auto'             
        }        
      }else if(e === 'b'){            
        return {                
          width:'60px',background:'red',margin: '10px auto'            
        }        
      }else if(e === 'c'){            
        return {                
          width:'60px',background:'pink',margin: '10px auto'             
        }        
      }
    }
  }
}
</script>

3.2 主要運用於：在元素多從事件下，顯示相應的樣式；

<templawww.cppcns.comte>
  <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實現動態樣式的資料請關注我們其它相關文章！