Vue学习之路第十二篇：为页面元素设置内联样式

发布时间：2020-12-16 23:26:58 所属栏目：百科来源：网络整理

导读：1、有了上一篇的基础，接下来理解内联样式的设置会更简单一点，先看正常的css内联样式：在看看通过Vue的属相绑定实现的具体情况： script type="text/javascript"gt; span style="color: #0000ff"gt;var/span vm = span style="color: #0000ff"gt;new/spans

1、有了上一篇的基础，接下来理解内联样式的设置会更简单一点，先看正常的css内联样式：

在看看通过Vue的属相绑定实现的具体情况：

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el:</span>"#app"<span style="color: #000000"&gt;,data:{
            styleObj:{</span>'font-size':'30px','color':'red'<span style="color: #000000"&gt;}
        },method:{}
    })
</span></script>

其实看起来也没有什么太特殊的亮点，无非是通过参数传递，把定义好的样式绑定到style属性里，底层和css原理是一样的。当然我们也可以像下面这么写，效果是一样的。

2、我们再看看怎么同时使用多个内联样式对象

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el:</span>"#app"<span style="color: #000000"&gt;,data:{
            styleObj1:{</span>'font-size':'30px','color':'red'<span style="color: #000000"&gt;},styleObj2:{</span>'font-style':'italic'<span style="color: #000000"&gt;}
        },method:{}
    })
</span></script>

可以看到，页面style属性值用了数组，数组元素就是data里定义的样式对象。我感觉用Vue写内联样式的最大好处就是，相同样式只用写一份，然后可以直接调用，但是显然这也是鸡肋，毕竟css强大的功能特性在那里放着，具体怎么使用还是要看具体的应用场景。退一步说，我们现在看到的只是表象，Vue实现的真正意义还是要去看源码解析才能发现其真正的作用价值，这里我们只是为了掌握了解vue的功能而已。

每天进步一点点！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!