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

目录

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

1. 三元运算符判断

hello world 

2. 动态设置class

2.1 主要运用于：实现循环列表中点击时，相应的元素高亮；（默认首个元素高亮）

2.2 主要运用于：为特定数值设置相应样式；

  
    
      
{{item.name}}
    
  

3. 方法判断

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

3.2 主要运用于：在元素多从事件下，显示相应的样式；

4. 数组绑定

// 数组与三元运算符结合判断选择需要的class


// 数组对象结合


data() {
  return{
    isActive:'active',
    isSort:'sort'
 }
}
// css
.active{
    /*这里写需要设置的第一种样式*/
  } 
.sort{
    /*这里写需要设置的第二种样式*/
  }

5. computed结合es6对象的计算属性名方法

 

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

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