vue动态绑定内联样式

1. 不好的做法: 将style属性看做一个普通的字符串属性进行绑定。

a. <元素 :style="变量">

data:{

变量: "css属性:值; css属性:值;..."

}

b. 问题: 极其不便于只操作其中某一个css属性

2. 好的办法: 将style看做一个对象来绑定。每个css属性都是对象中的一个属性。

结果: "css属性1:属性值1; css属性2:属性值2;..."

↑ ↑ ↑ ↑

a. <元素 :style="{ css属性1: 变量1, css属性2: 变量2, ... }"

data:{

变量1:"属性值1",

变量2:"属性值2",

... ...

}

b. 优点: 轻易只修改其中某一个css属性值，而不影响其他属性值

c. 问题: 如果多个css属性的变量零散的保存在data中，如果多个元素都需要控制内联样式，就极容易发生冲突。

d. 示例: 控制一个飞机的飞行

1_style.html

3. 更好的解决办法:企业网站设计，品牌网站建设,将每个元素所需的所有内联样式变量，集中保存在data中的一个对象里。

a. <元素1 :style="变量名1">

<元素2 :style="变量名2">

data:{

变量名1:{

css属性:值,

... : ...

},

变量名2:{

css属性:值,

... : ...

}

b. 优点: 避免不同元素间相同css属性的冲突

c. 示例: 控制两个飞机的飞行

1_style2.html

4. 问题: 如果元素上有些内联css属性是固定不变的，而有些css属性是可能发生变化的？

5.解决:对于网站开发而言，其实在一个元素上写死的固定不变的style和动态变化的:style是可以并存的。最后运行的结果是，:style动态生成的css属性会和style中固定不变的属性合并为最终应用到元素上的style属性。

结果: style="固定不变的css属性:值; 变化的css属性: 值; ..."

↑ ↑

<元素 style="固定不变的css属性:值" :style="变量"

data:{

变量:{

变化的css属性: 值

}

}

比如: <img style="left:50%" :style="img1Style" src="img/p3.png">

data:{

img1Style:{

marginLeft:"-200px",

bottom:"25px",

}

}

6问题: DOM中经常批量修改一个元素的多个css属性，如果单个修改每个css属性值，代码会很繁琐

7.解决: 用class来代替单独修改每个css属性。