場景：微信小程序設置動態樣式，有些時候是需要用到變量來書寫的；但是實際使用發現，行內式書寫雖然有效，但是會使得微信小程序的編輯失敗；故需要使用動態的v-bind來寫動態變量行內式樣式（既使用:style="{ }"）

<template><view><view class="big_box"><!-- 故需要通過動態v-bind來設置 動態變量樣式 ----正確書寫? --><view class="p_box" :style="{'width':(widthNum+'rpx'),'height':heightNum,}">123</view><!-- 直接行內式寫樣式 值為變量會導致編輯錯誤 ----錯誤書寫? --><view class="p_box" style="width:{{widthNum+'rpx'}};height:{{heightNum}};">123</view><view>1</view></view></view> </template><script> export default {data () {return {widthNum: 100,heightNum: '100rpx',}}, } </script> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的uni-app微信小程序动态样式设置；微信小程序style行内式无效；微信小程序style行内式编译报错；微信小程序:style设置样式的全部內容，希望文章能夠幫你解決所遇到的問題。

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