从后台接口动态获取样式字段渲染html

动态渲染样式

在后台管理项目中可以设置前台首页banner上的按钮的位置字体颜色等等样式，虽然知道用style动态绑定样式，但是很多写法都是错误的，弄了许久才弄好，现在把代码贴出来记录一下

1. 后台接口返回的数据中样式都写道一个字段里了先转换一下：

   scope.extend=JSON.parse(scope.extend)
   
   temporary.language=scope.language
   
   temporary.title=scope.title
   
   temporary.imageUrl=scope.url
   
   temporary.bottom=scope.extend.bottom
   
   temporary.right=scope.extend.right
   
   temporary.buttonStyle=scope.extend.buttonStyle
   
   temporary.fontSize=scope.extend.fontSize
   
   temporary.color1=scope.extend.backgroundColor
   
   temporary.color2=scope.extend.borderColor
   
   temporary.color=scope.extend.color
   
   temporary.content=scope.extend.content
   
   temporary.website=scope.link_url
   

2. 绑定到元素上

   <div class="wrap" :style="{backgroundImage:'url('+priviewData.imageUrl+')'}" v-if="priviewDialog">
     <div class="NuxtTo" :style="{bottom:`${priviewData.bottom}`,right:`${priviewData.right}`,borderRadius:`${priviewData.buttonStyle}`,fontSize:`${priviewData.fontSize}`,background:`${priviewData.color1}`,borderColor:`${priviewData.color2}`,color:`${priviewData.color}`,}" @click="goto" v-if="priviewData.is_show">
     {{priviewData.content}}
   	</div>
   </div>
   

3. 这样就可以在页面上动态的显示出来样式了