Vue基础-04-class和style绑定

Vue基础-04-class和style绑定

vue开发过程中，肯定会涉及到对元素的样式操作。

vue提供了两种方式操作样式，动态操作class属性。直接标签上面写style属性，值是动态变化

1. <div style="color:red">

scope属性

在vue组件中要设计样式，所有的样式代码都要放在style标签中。

1. <style scoped>

可以指定当前style的样式只能在这个组件中使用，不能穿透到子组件

如果你需要指定某个css样式穿透，我们可以在指定css选择器前面添加如下代码

1. /deep/.op{
2. color:blue
3. }

外部样式

你们的每一个组件都可能会用到某些外部公共样式，你可以在组件指定引入css文件

1. <style scoped>
2. @import "../../assets/css/common.css";

@import语句结尾了需要加上一个分号

引入的外部样式是否能够穿透

外部引入的样式，默认是可以穿透到子元素，如果你想要实现外部样式只作用当前组件

1. <style scoped src="../../assets/css/common.css"></style>
2. <style scoped>
3. /* @import "../../assets/css/common.css"; */
4. .as{
5. width: 100px;
6. height: 100px;
7. background: tomato;
8. }
9. h1{
10. color: red;
11. }
12. /* /deep/.op{
13. color:blue
14. } */
15. </style>

动态绑定class

class属性可以实现动态值变化，借助于v-bind这个指令可以实现

1. <div v-bind:class="{box:true}"></div>
2. <div v-bind:class="{box:false}"></div>
3. <div v-bind:class="{box:active}"></div>
4. <button @click="active=!active">点击控制</button>

active这个变量需要在data中定义出来

1. data(){
2. return{
3. active:false
4. }
5. },

给一个class绑定多个值

1. <span :class="{ospan:true,kill:true}">301</span>

1. <span :class="[ospanvar,killvar]">401</span>
2. data(){
3. return{
4. active:false,
5. ospanvar:"ospan", //ospan 选择器名字
6. killvar:"kill"
7. }
8. },

动态绑定style

Vue也可以动态绑定一个style属性，在html标准中每个标签默认可以支持一个style属性

1. <div style="color:red"></div>

语法：

1. <p style="color:pink">王一博</p>
2. <p :style="{color:nameColor}">张应明</p>
3. <p :style="[fontStyle,boxStyle]">杨唐</p>

如果是一个数组，我们需要提供数组中每个变量

1. data(){
2. return{
3. nameColor:"green",
4. fontStyle:{
5. 'color':"red",
6. 'font-size':"20px"
7. },
8. boxStyle:{
9. "border":"1px solid red"
10. }
11. }
12. }

一般在开发过程中，class动态绑定用的比较多，style动态绑定作为扩展