Vue 内联样式

前置说明

Vue 绑定HTML 全局属性style，可以动态地改变属性值。这里就不讲内联样式的基础了，具体轻查看官网文档 Class 与 Style 绑定。

主要分为以下两个步骤进行：

1. v-bind 指令绑定指定标签的内联样式；
2. 组件实例初始响应式状态的 data() 函数写响应式数据，即内联样式的属性值。

绑定内联样式

看下面的例子，当我们修改data()返回的themeColor变量时，Vue 紧接着动态地修改 p 标签内联样式属性值：

<p :style="{ 'color': themeColor }">Hello World!</p>

Vue.createApp({
	data() {
		return {
			themeColor: 'red'
		};
	}
}).mount('#app');

CSS 变量作用域

CSS 变量的使用范围是有限制的，也就是作用域，只作用于声明变量处节点下的所有节点。如下所示：

<div id="app" style="--font-color: 12px;">
	<p>Hello World!</p>
</div>

#app > p {
	color: var(--font-color);
}

--font-color就是 CSS 变量，这个变量值允许app#div下的节点使用，相邻节点不可以。

结合 CSS 变量

data()返回两个值：fontColor 和 fontSize。

Vue.createApp({
	data() {
		return {
			fontColor: 'red',
			fontSize: '14'
		};
	}
}).mount('#app');

Vue 挂载根节点app#div，并绑定其内联样式：--font-color以及--font-size。如下所示：

<div id="app" :style="{ '--font-color': fontColor, '--font-size': fontSize + 'px' }">
	<p>1 Hello World!</p>
	<p>2 Hello World!</p>
	<!-- ...... -->
	<input v-model="fontColor" placeholder="输入字体大小值" />
	<input v-model="fontSize" placeholder="输入字体颜色值" />
</div>

p 属性值用var()函数代替。如下所示：

p {
	color: var(--font-color);
	font-size: var(--font-size);
}

在输入框内输入想要的颜色以及字体大小，Vue 可以动态地修改这些 p 标签的样式：