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

最新推荐文章于 2024-03-26 15:38:16 发布

L_WalkingPig

最新推荐文章于 2024-03-26 15:38:16 发布

阅读量4.9k

点赞数 1

分类专栏： elementUi Vue 文章标签： vue

本文链接：https://blog.csdn.net/l_walkingpig/article/details/108219254

版权

Vue 同时被 2 个专栏收录

27 篇文章 4 订阅

订阅专栏

elementUi

6 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中如何动态地根据数据变化设置组件的style样式，特别是针对图片的高度和宽度。同时，展示了利用filters过滤器来进一步定制样式的方法。内容侧重于实践操作，作为个人开发经验的分享。

摘要由CSDN通过智能技术生成

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

<el-image :class="classRotation"
      v-if="imageData.src !== undefined"
      :src="imageData.src"
      :style="imageStyle">
</el-image>

//在data中声明 imageStyle
data(){
   return{
     imageData:{},
     imageStyle :{}, //样式参数对象
     classRotation:'',
     positionAndSizeData:{}
   }
},

我这里的业务场景是监听 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
   },
},

使用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>

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
//   }
// },

以上为个人日常记录，仅供参考~~！ : D