011 V 绑定内联样式

不二如是

                               
登录/注册后可看大图

上一讲我们通过数组语法来绑定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="[StyleA,StyleB]">鱼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



答案：

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

---

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

                               
登录/注册后可看大图

这位鱼油，如果喜欢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