This is the 11th day of my participation in Gwen Challenge

<div :style="{width:'4px',height: '24px',background: '#f7ce51'}"></div>
Copy the code

1. Ternary operator judgment

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

2. Dynamically set the class

2.1 Mainly used in: realizing the highlighting of corresponding elements when clicking in the circular list; (Default first element highlighted)

<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>
Copy the code

2.2 Mainly used in: setting corresponding styles for specific values;

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

3. Method judgment

3.1 Mainly used in: setting corresponding styles for different data values;

<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('value',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>
Copy the code

3.2 Mainly used in: in the element from the event, display the corresponding style;

<template>
  <div 
      class="homeWrap" :class="{'select': selected === 1,'click': clicked === 1}" 
      @click="handleClick(1)" @mousedown="menuOnSelect(1)">The home page</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>
Copy the code

4. Array binding

<div :class="[isActive,isSort]"></div>
// The array is combined with the ternary operator to determine the desired class
<div class="item" :class="[item.name? 'lg':'sm']"></div>
<div class="item" :class="[item.age<18? 'gray':'']"></div>// Combine array objects<div :class="[{ active: isActive }, 'sort']"></div>Data () {return{isActive:'active', isSort:'sort'}} // CSS.Copy the code

5. Computed with es6 object attribute name method

 <div :class="classObject"></div>
 
  export default {
    data(){
      return{
        isActive:true}},computed: {classObject() {
        return{
          class_a:this.isActive,
          class_b:!this.isActive
        // Please fill it in according to your own project situation}}}}// css
.class_a{
    /* The first style that needs to be set */
}
 
.class_b{
   /* Write the second style that needs to be set */
 }
Copy the code