鱼C论坛

 找回密码
 立即注册
查看: 1999|回复: 6

[庖丁解牛] 011 V 绑定内联样式

[复制链接]
发表于 2018-9-7 10:59:24 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2018-9-7 17:19 编辑


                               
登录/注册后可看大图


上一讲我们通过数组语法来绑定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>
Snip20180907_271.png


大多数情况下,直接像上面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
            },
        }
    })
Snip20180907_272.png

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

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





课后作业


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

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



答案:
游客,如果您要查看本帖隐藏内容请回复





如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢Vue,请订阅 专辑传送门)(不喜欢更要订阅



                               
登录/注册后可看大图

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-11-27 12:59:27 | 显示全部楼层
1.v-bind:style
2.Style{
width:99,
border:'1px soled red'
},
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-8 17:25:09 | 显示全部楼层
1.通过指令v-bind:style可以为指定元素绑定样式
2.StyleB: {
                width: '99px',
                border: '1px solid red'
            },
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-5-5 13:24:55 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-6-20 13:17:57 | 显示全部楼层
0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-6-23 20:26:56 | 显示全部楼层
:style
StyleA: {
                width: 99,
                border: 1 solid red
            }
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2022-10-31 18:00:42 From FishC Mobile | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 23:19

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表