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

 更新时间:2021年06月19日 08:49:04   作者:明天也要努力  
本文要给大家介绍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>
 
  export default {
    data(){
      return{
        isActive:true
      }
    },
    computed:{
      classObject() {
        return{
          class_a:this.isActive,
          class_b:!this.isActive
        //  这里要结合自身项目情况修改填写
        }
      }
    }
  }
 
// css
.class_a{
    /*这里写需要设置的第一种样式*/
}
 
.class_b{
   /*这里写需要设置的第二种样式*/
 }

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

相关文章

  • Element Table行的动态合并及数据编辑示例

    Element Table行的动态合并及数据编辑示例

    这篇文章主要为大家介绍了Element Table行的动态合并及数据编辑示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue选择下拉框动态变化表单方式

    vue选择下拉框动态变化表单方式

    这篇文章主要介绍了vue选择下拉框动态变化表单方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue实现双向绑定的方法

    Vue实现双向绑定的方法

    这篇文章主要介绍了Vue实现双向绑定的方法,了解vue的双向数据绑定原理以及核心代码模块,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue2+elementui进行hover提示的使用

    vue2+elementui进行hover提示的使用

    本文主要介绍了vue2+elementui进行hover提示的使用,主要分为外部和内部,具有一定的参考价值,感兴趣的可以了解一下
    2021-11-11
  • Vue中mixins的使用方法以及实际项目应用指南

    Vue中mixins的使用方法以及实际项目应用指南

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用,下面这篇文章主要给大家介绍了关于Vue中mixins的使用方法以及实际项目应用指南,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue中使用$http.post请求传参的错误及解决

    vue中使用$http.post请求传参的错误及解决

    这篇文章主要介绍了vue中使用$http.post请求传参的错误及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue.js 点击按钮显示/隐藏内容的实例代码

    Vue.js 点击按钮显示/隐藏内容的实例代码

    下面小编就为大家分享一篇Vue.js 点击按钮显示/隐藏内容的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • van-dialog 组件调用报错的解决

    van-dialog 组件调用报错的解决

    这篇文章主要介绍了van-dialog 组件调用报错的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue实现导航标题栏随页面滚动渐隐渐显效果

    vue实现导航标题栏随页面滚动渐隐渐显效果

    这篇文章主要介绍了vue实现导航标题栏随页面滚动渐隐渐显效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • vue中如何自定义右键菜单详解

    vue中如何自定义右键菜单详解

    这篇文章主要给大家介绍了关于vue中如何自定义右键菜单的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12

最新评论