vue中动态设置style样式和使用filters过滤器设置样式

例如：想给图片增加高度和宽度

<el-image :class="classRotation"
      v-if="imageData.src !== undefined"
      :src="imageData.src"
      :style="imageStyle">
</el-image>
 
//在data中声明 imageStyle
data(){
   return{
     imageData:{},
     imageStyle :{}, //样式参数对象
     classRotation:'',
     positionAndSizeData:{}
   }
},

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

我这里的业务场景是监听 positionAndSizeData 数据变化设置样式（imageStyle）：

watch:{
   positionAndSizeData:{
      handler(){
        //通过this.$set('目标数据','key','value');给imageStyle 追加数据
        this.$set(this.imageStyle,'height',this.positionAndSizeData.h + 'px');
        this.$set(this.imageStyle,'width',this.positionAndSizeData.w + 'px'); 
      },
      deep:true,
      immediate:true
   },
},

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

使用filters过滤器设置样式：

<div v-if="properties.property.json.type=='1'">
    <!-- :style="数据源|过滤方法" -->
    <span v-if="properties.property.json.label.show" 
          :style="properties.property.json.label|styleFilter"> 
          {{properties.property.json.label.value}}
    </span>
</div>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

filters: {
   styleFilter(val) {
     return {
       'fontSize': val.fontSize + 'px',
       'color': val.color,
       'letterSpacing': val.letterSpacing + 'px',
       'fontWeight': val.fontWeight
     }
   }
},
//或者处理完后return出去
// filters: {
//   styleFilter(val) {
//     let temp = JSON.parse(JSON.stringify(val));
//     temp['fontSize'] = val['fontSize'] + 'px'
//     temp['letterSpacing'] = val['letterSpacing'] + 'px'
//     return temp
//   }
// },

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

下面是我项目里的使用

 <p  :style="card.member_card.base_info.color | colorFilter('bonus')">200</p>

  

 

  
1
 

 filters: {
    colorFilter: function (value, type) {
      if (!value) return ''
      const colorObj = {
        'Color010': '#63b359',
        'Color020': '#2c9f67',
        'Color030': '#509fc9',
        'Color040': '#5885cf',
        'Color050': '#9062c0',
        'Color060': '#d09a45',
        'Color070': '#e4b138',
        'Color080': '#ee903c',
        'Color081': '#f08500',
        'Color082': '#a9d92d',
        'Color090': '#dd6549',
        'Color100': '#cc463d',
        'Color101': '#cf3e36',
        'Color102': '#5E6671'
      }
      if (type === 'bonus') {
        return 'color:' + colorObj[value]
      } else {
        return colorObj[value]
      }
    }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
 

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/118763455