vue中动态设置style样式和使用filters过滤器设置样式 ゝ一世哀愁。 2022-09-01 13:48 198阅读 0赞 例如:想给图片增加高度和宽度 <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 // } // },
还没有评论,来说两句吧...