Vue 内联样式的数据绑定

Posted f4nniu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 内联样式的数据绑定相关的知识,希望对你有一定的参考价值。

Vue 内联样式的数据绑定

之前学的是数据绑定 class,现在可以将数据绑定到 style 中。

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px‘ }">内联样式绑定</div>
</div>

<script>
new Vue({
  el: ‘#app‘,
  data: {
    activeColor: ‘green‘,
    fontSize: 30
  }
})
</script>

以上是关于Vue 内联样式的数据绑定的主要内容,如果未能解决你的问题,请参考以下文章

Vue绑定class与绑定内联样式--v-bind

Vue 动态样式绑定

Vue.js 内联样式绑定style

05《Vue 入门教程》Vue 动态样式绑定

v-bind指令动态绑定内联样式(style)

Vue.js高效前端开发 • Vue基本指令