vue中内联样式
Posted wangyuxue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中内联样式相关的知识，希望对你有一定的参考价值。
一、 使用内联样式
1. 直接在元素上通过 `:style` 的形式，书写样式对象
<h1 :style="{color: ‘red‘, ‘font-size‘: ‘40px‘}">这是一个善良的H1</h1>
2. 将样式对象，定义到 `data` 中，并直接引用到 `:style` 中
（1） 在data上定义样式：
data: {
h1StyleObj: { color: ‘red‘, ‘font-size‘: ‘40px‘, ‘font-weight‘: ‘200‘ }
}
（2）在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
3. 在 `:style` 中通过数组，引用多个 `data` 上的样式对象
（1）在data上定义样式：
data: {
h1StyleObj: { color: ‘red‘, ‘font-size‘: ‘40px‘, ‘font-weight‘: ‘200‘ },
h1StyleObj2: { fontStyle: ‘italic‘ }
}
（2） 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
二、实例
<body> <div id="app"> <!-- 对象就是无序键值对的集合 --> <h1 :style="styleObj1">这是一个h1</h1> <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: ‘#app‘, data: { styleObj1: { color: ‘red‘, ‘font-weight‘: 200 }, styleObj2: { ‘font-style‘: ‘italic‘ } }, methods: {} }); </script> </body>
以上是关于vue中内联样式的主要内容，如果未能解决你的问题，请参考以下文章