9.样式绑定

• 9.样式绑定
  • 1.class样式处理
  • 2.style样式处理
  • 3.绑定对象和绑定数组 的区别
  • 4.深度选择器的应用

1.class样式处理

• 对象语法

<div v-bind:class="{active: isActive, error: isError}"></div>

• 数组语法

<div v-bind:class="['activeClass', 'errorClass']"></div>

2.style样式处理

• 对象语法

<div v-bind:style="{color:activeColor, fontSize: fontSize}"></div>

• 数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

3.绑定对象和绑定数组 的区别

• 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
• 绑定数组的时候 数组里面存的是data 中的数据

4.深度选择器的应用

有时候UI组件提供的默认的样式不能满足项目的需要，就需要我们对它的样式进行修改，但是发现加了scoped后修改的样式不起作用

解决方法：

使用深度选择器，将scoped样式中的选择器“深入”，即影响子组件

注意：如果你使用了Less或Sass等预处理器，可能无法>>>正确解析。在这些情况下，您可以使用组合/deep/或::v-deep组合 - 两者都是别名，>>>并且工作完全相同

	/* 深度选择器 */
	.add-input {
		/deep/ .uni-navbar__header-container {
			justify-content: center;
		}
	}