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的功能而已。
每天进步一点点!
如对本文有疑问, 点击进行留言回复!!
MFC的静态库.lib、动态库.dll(包含引入库.lib)以及Unicode库示例
CTF 刷题记录(一) 白云新闻搜索(手动与自动化SQL注入)
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论