1.直接在元素上通过:style 的形式，书写样式对象

1
<h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>

2.将样式对象定义在 data 中，并直接引用到:style 中

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <h1 :style="styleObj1">这是一个H1</h1>
</template>

<script>
export default {
	data() {
  	return {
    	styleObj1: {color:'blue','font-weight':200,'font-size':'40px'}
    }
  }
}
</script>

3.在:style 中通过数组，引用多个 data 上的样式对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>
</template>

<script>
export default {
	data() {
  	return {
    	styleObj1: {color:'blue','font-weight':200,'font-size':'40px'},
    	styleObj2: {'font-style':'italic'}
    }
  }
}
</script>