您的位置:首页 > 编程学习 > > 正文

vue一个组件两种样式(Vue实现动态样式的多种方法汇总)

更多 时间:2021-10-25 10:29:15 类别:编程学习 浏览量:1346

vue一个组件两种样式

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

1. 三元运算符判断
  • <text :style="{color:state?'#ff9933':'#ff0000'}">hello world </text>
    <script>
    export default {
    	data() {
    		return {
    			state: true
    		}
    	}
    }
    </script>
    
    
  • 2. 动态设置class

    2.1 主要运用于:实现循环列表中点击时,相应的元素高亮;(默认首个元素高亮)

  • <template>
    	<li class="wrapper" v-for="(item,index) in houseList" :key="index" @click="rightTap(index)">
    		<li class="houseTitle" :class="{'active' : index === rightIndex}">
    			{{item.name}}
    		</li>
    	</li>
    </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 主要运用于:为特定数值设置相应样式;

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

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

  • <template>
      <li v-for="(item,index) in houseList" :key="index">             
         <li :style="getStyle(item.status)">{{item.name}}</li>    
      </li> 
    </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>
      <li 
          class="homeWrap" :class="{'select': selected === 1,'click': clicked === 1}" 
          @click="handleClick(1)" @mousedown="menuOnSelect(1)">
         主页
      </li>   
    </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. 数组绑定
  • <li :class="[isActive,isSort]"></li>
    // 数组与三元运算符结合判断选择需要的class
    <li class="item" :class="[item.name? 'lg':'sm']"></li>
    <li class="item" :class="[item.age<18? 'gray':'']"></li>
    // 数组对象结合
    <li :class="[{ active: isActive }, 'sort']"></li>
    
    data() {
      return{
        isActive:'active',
        isSort:'sort'
     }
    }
    // css
    .active{
        /*这里写需要设置的第一种样式*/
      } 
    .sort{
        /*这里写需要设置的第二种样式*/
      }
    
    
  • 5. computed结合es6对象的计算属性名方法
  •  <li :class="classObject"></li>
     
      export default {
        data(){
          return{
            isActive:true
          }
        },
        computed:{
          classObject() {
            return{
              class_a:this.isActive,
              class_b:!this.isActive
            //  这里要结合自身项目情况修改填写
            }
          }
        }
      }
     
    // css
    .class_a{
        /*这里写需要设置的第一种样式*/
    }
     
    .class_b{
       /*这里写需要设置的第二种样式*/
     }
    
    
  • 以上就是Vue实现动态样式的多种方法汇总的详细内容,更多关于Vue实现动态样式的资料请关注开心学习网其它相关文章!

    标签:vue 动态样式
    您可能感兴趣