使用内联样式
1、 直接在元素上通过:style的形式,书写样式对象
2、 将样式对象,定义到data中,并直接引用到:style中
3、 在:style中通过数组,引用多个data上的样式对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
<!-- 对象就是无序键值对的集合 -->
<!-- <h1 :style="{color:'red','font-weight':200}">这是一个h1</h1> -->
<!-- <h1 :style="styleobj1">这是一个h1</h1> -->
<h1 :style="[styleobj1,styleobj2]">这是一个h1</h1>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
styleobj1:{color:'red','font-weight':200},
styleobj2:{'font-style':'italic'}
},
methods:{
}
})
</script>
</body>
</html>