使用内联样式
- 直接在元素上通过
:style的形式，书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">Vue 中通过v-bind属性绑定为元素</h1>
- 将样式对象，定义到
data中，并直接引用到:style中
- 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="h1StyleObj">Vue 中通过v-bind属性绑定为元素</h1>
- 在
:style中通过数组，引用多个data上的样式对象
- 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">Vue 中通过v-bind属性绑定为元素</h1>
下面示例如下。
直接在元素上通过 :style 的形式，书写样式对象
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 :style="{color: 'red', 'font-size': '40px'}">Vue 中通过v-bind属性绑定为元素</h1>
</div>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {
},
methods:{}
})
</script>
</body>
</html>
浏览器显示如下：
将样式对象，定义到 data 中，并直接引用到 :style 中
浏览器显示如下：
在 :style 中通过数组，引用多个 data 上的样式对象
浏览器显示如下：
