Vue中使用内联方式的3中方式
1、直接在元素上通过：style的形式，书写样式对象
<h1 :style="{'color':'red','font-weight':200}">你会freestyle吗？</h1>
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
</head>
<body>
<div id="app">
<h1 :style="{'color':'red','font-weight':200}">你会freestyle吗？</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
},
methods: {
}
});
</script>
</body>
</html>
2、将样式对象定义到data中，再引用
（1）先在data中定义样式对象
data: {
styleObj1: {
'color': 'red',
'font-weight': 200
}
},
（2）在元素中通过属性绑定的方式，将样式对象应用
<h1 :style="styleObj1">你会freestyle吗？</h1>
3、使用数组，引用多个data上的样式对象
data: {
styleObj1: {
'color': 'red',
'font-weight': 200
},
styleObj2: {
'letter-spacing': '0.5em',
'font-style': 'italic'
}
},
<h1 :style="[styleObj1,styleObj2]">你会freestyle吗？</h1>
可以看得出来，在内联样式的使用上，Vue也更加倾向于使用对象和对象数组的方式。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
