Vue中提供了一個非常方便的功能，即通過css函數來編寫內聯樣式。這個函數接收一個對象參數，對象中的屬性即為css屬性，屬性值為css值。 使用方法如下：

template:
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">
{{ message }}
</div>
script:
<script>
export default {
data() {
return {
message: 'Hello World!',
textColor: 'red',
fontSize: 16
}
}
}
</script>
style:
<style scoped>
div {
padding: 10px;
}
</style>

在上面的例子中，我們通過:style綁定了一個對象，對象中定義了color和fontSize兩個css屬性，而這兩個屬性的值分別從data中的textColor和fontSize中讀取。其中，fontSize的值需要加上單位px。在上面的例子中，我們還加入了一個padding值，作為額外的樣式。 這個功能可以用來模塊化樣式，提高代碼可讀性與可維護性，而且使用起來也很方便，只要傳入一個對象即可達到設置內聯樣式的效果。