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

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

<el-image :class="classRotation"v-if="imageData.src !== undefined":src="data: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过滤器设置样式相关推荐

vue中动态设置背景渐变色
vue中动态设置背景渐变色 1.效果展示 2.核心(动态更换单一的背景颜色也可以使用) <div class="ss" v-bind:style="{ backgr ...
vue中动态引入图片为什么要是require，你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
VUE中动态改变字体大小
VUE中动态改变字体大小父组件将自己的数据传递送给子组件展示,子组件监听click操作,emit发送出去,父组件监听通过emit发送的信息,改变控制字体大小的postFontSize,通过style ...
Vue中动态添加class写法动态静态clas混合
Vue中动态添加class写法动态静态clas混合示例 //fx,cont-block为静态class ob为动态class <div :class="[ 'fx','cont- ...
vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped 转载于:https://www. ...
Vue中动态使用JavaScript修改CSS样式
文章目录前言一.实现目标效果的难点二.使用Computed配合CSS变量完成动态修改CSS 1.设置Computed属性以及slider行内属性 2. 设置css样式(这里使用的是原生css,l ...
vue中动态获取dom元素进行操作
这几天我远程面试了一家公司,期间问题我都回答上来了但有一个问题我很纳闷就是你说下vue中获取dom元素的方法吧我说大体上俩中吧 1.vue中 ref的方法给元素起一个ref名称通过 th ...
javascript中动态加载js、vbs脚本或者css样式表
目录:DynamicLoad类简介.属性.方法.事件.示例.下载. DynamicLoad类简介本文将为您介绍一个在javascript中可以动态加载js.vbs脚本和css样式表的DynamicL ...
vue中,静态书写select的option选项时如何设置默认选中项
@mishu vue中,静态书写select标签的option选项时如何设置默认选中项在vue框架下,给select标签使用v-model绑定数据时,我们的selected=''selected'' ...

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

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

最新文章

热门文章