Vue.js style (内联样式)

Posted 1点

tags:

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

demo 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue</title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="six">
  <div v-bind:style="{ color: activeColor, fontSize: fontSize + \'px\' }">努力向上</div>
</div>

<script>
  new Vue({
    el: \'#six\',
    data: {
      activeColor: \'blue\',
      fontSize: 20

    }
  })
</script>
</body>
</html>

　　效果：

以上是关于Vue.js style (内联样式)的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js 内联样式绑定style

vue.js实战学习——v-bind 及class与 style绑定

v-bind指令动态绑定内联样式（style）

Vue.js Class 与 Style 绑定

Vue.js Class与Style绑定

Vue.js Class与Style绑定