例如：想給圖片增加高度和寬度

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

---

下面是我項目里的使用

<p :style="card.member_card.base_info.color | colorFilter('bonus')">200</p> 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]}}

總結

以上是生活随笔為你收集整理的vue中动态设置style样式和使用filters过滤器设置样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。