動態渲染樣式

在後臺管理專案中可以設定前臺首頁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. 這樣就可以在頁面上動態的顯示出來樣式了