011 V 绑定内联样式
本帖最后由 不二如是 于 2018-9-7 17:19 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们通过数组语法来绑定class，本次学习绑定内联样式。
使用v-bind:style(:style)可以给元素绑定内联样式，方式与:class类似，当然也可以使用数组语法。
现在创建一个div：
<div id="myApp">
<div :style="{'myColor':color,'myFontSize':fontSize+'px'}">鱼C工作室</div>
</div>
创建Vue实例：
<script>
var app = new Vue({
el:"#myApp",
data:{
myColor:'green',
myFontSize:22
}
})
</script>
大多数情况下，直接像上面div中写一长串的样式，很不方便阅读，所以常常将它们写在data或computed里。
修改一下上面的示例：
<div id="myApp">
<div :style="myStyles">鱼C工作室</div>
</div>
<script>
var app = new Vue({
el: "#myApp",
data: {
myStyles: {
color: 'green',
fontSize: 22
}
}
})
</script>
如果需要多个样式，就用数组语法：
<div :style="">鱼C工作室</div>
修改样式：
var app = new Vue({
el: "#myApp",
data: {
StyleA: {
color: 'green',
fontSize: 22
},
}
})
StyleB部分已删除，见课后习题2。
另外，使用:style时，Vue会自动给特殊的CSS属性名称前面增加前缀，transform，目前没有遇到，了解即可。
课后作业
1、通过什么方式可以为指定元素绑定样式？
2、模仿StyleA的写法完成StyleB的样式设置，添加width：99px，border：1px solid red
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 1.v-bind:style
2.Style{
width:99,
border:'1px soled red'
}, 1.通过指令v-bind:style可以为指定元素绑定样式
2.StyleB: {
width: '99px',
border: '1px solid red'
}, 1 0 :style
StyleA: {
width: 99,
border: 1 solid red
} 1
页:
[1]