011 V 绑定内联样式

不二如是

                               
登录/注册后可看大图

上一讲我们通过数组语法来绑定class，本次学习绑定内联样式。

使用v-bind:style(:style)可以给元素绑定内联样式，方式与:class类似，当然也可以使用数组语法。

现在创建一个div：

1. <div id="myApp">
   
2.     <div :style="{'myColor':color,'myFontSize':fontSize+'px'}">鱼C工作室</div>
   
3. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             myColor:'green',
   
6.             myFontSize:22
   
7.         }
   
8.     })
   
9. </script>

复制代码

大多数情况下，直接像上面div中写一长串的样式，很不方便阅读，所以常常将它们写在data或computed里。

修改一下上面的示例：

1. <div id="myApp">
   
2.     <div :style="myStyles">鱼C工作室</div>
   
3. </div>
   
4. <script>
   
5.     var app = new Vue({
   
6.         el: "#myApp",
   
7.         data: {
   
8.             myStyles: {
   
9.                 color: 'green',
   
10.                 fontSize: 22
    
11.             }
    
12. 
    
13.         }
    
14.     })
    
15. </script>

复制代码

如果需要多个样式，就用数组语法：

1.   <div :style="[StyleA,StyleB]">鱼C工作室</div>

复制代码

修改样式：

1.    var app = new Vue({
   
2.         el: "#myApp",
   
3.         data: {
   
4.             StyleA: {
   
5.                 color: 'green',
   
6.                 fontSize: 22
   
7.             },
   
8.         }
   
9.     })

复制代码

StyleB部分已删除，见课后习题2。

另外，使用:style时，Vue会自动给特殊的CSS属性名称前面增加前缀，transform，目前没有遇到，了解即可。

---

课后作业


1、通过什么方式可以为指定元素绑定样式？

2、模仿StyleA的写法完成StyleB的样式设置，添加width：99px，border：1px solid red



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

lbjstudypython

1.v-bind:style
2.Style{
width:99,
border:'1px soled red'
},

Ruide

1.通过指令v-bind:style可以为指定元素绑定样式
2.StyleB: {
                width: '99px',
                border: '1px solid red'
            },

优时风

1

一笙彤

0

suweixuan1998

:style
StyleA: {
                width: 99,
                border: 1 solid red
            }

jack6666

1