初识Vue 3.0 —— 动态Style内联样式绑定
七娃博客32 次
<h5>17.Style内联样式绑定</h5> <div> <p><div :style="{ color: activeColor, fontSize: fontSize + 'px' }"> </div></p> <p class="styleB"> <span class="hand" :style="{color: activeColor, fontSize: fontSize + 'px'}" >我是24号红色字体</span> <span :style="stylearr">我是18号蓝色字体</span> </p> <pre>注意:内联样式属性名可以用驼峰式,或短横线分割,也可以是一个对象/数组</pre> </div> <script type="text/javascript"> //绑定style内联样式 const styleb = { data(){ return { activeColor:"red", fontSize:24, stylearr:{ color:"blue", fontSize:"18px" } } } } Vue.createApp(styleb).mount(".styleB"); </script>
交互效果见:https://course.51qux.com/vue3-0-1
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:初识Vue 3.0 —— 动态Style内联样式绑定 - Qui-Note
评论 | 0 条评论