Vue学习之路第十二篇：为页面元素设置内联样式
程序员文章站
2022-03-12 17:58:56
1、有了上一篇的基础，接下来理解内联样式的设置会更简单一点，先看正常的css内联样式： 在看看通过Vue的属相绑定实现的具体情况： 其实看起来也没有什么太特殊的亮点，无非是通过参数传递，把定义好的样式绑定到style属性里，底层和css原理是一样的。当然我们也可以像下面这么写，效果是一样的。 2、我 ......
1、有了上一篇的基础，接下来理解内联样式的设置会更简单一点，先看正常的css内联样式：
<dvi id="app">
<p style="font-size:30px;color:red">vue内联样式定义</p>
</dvi>
在看看通过vue的属相绑定实现的具体情况：
<body>
<dvi id="app">
<p :style="styleobj">vue内联样式定义</p>
</dvi>
<script type="text/javascript">
var vm = new vue({
el:"#app",
data:{
styleobj:{'font-size':'30px','color':'red'}
},
method:{}
})
</script>
</body>
其实看起来也没有什么太特殊的亮点，无非是通过参数传递，把定义好的样式绑定到style属性里，底层和css原理是一样的。当然我们也可以像下面这么写，效果是一样的。
<dvi id="app">
<p :style="{'font-size':'30px','color':'red'}">vue内联样式定义</p>
</dvi>
2、我们再看看怎么同时使用多个内联样式对象
<body>
<dvi id="app">
<p :style="[styleobj1 , styleobj2]">vue内联样式定义</p>
</dvi>
<script type="text/javascript">
var vm = new vue({
el:"#app",
data:{
styleobj1:{'font-size':'30px','color':'red'},
styleobj2:{'font-style':'italic'}
},
method:{}
})
</script>
</body>
可以看到，页面style属性值用了数组，数组元素就是data里定义的样式对象。我感觉用vue写内联样式的最大好处就是，相同样式只用写一份，然后可以直接调用，但是显然这也是鸡肋，毕竟css强大的功能特性在那里放着，具体怎么使用还是要看具体的应用场景。退一步说，我们现在看到的只是表象，vue实现的真正意义还是要去看源码解析才能发现其真正的作用价值，这里我们只是为了掌握了解vue的功能而已。
每天进步一点点！
上一篇： 短视频，电商的翻版