Vue学习之路第十一篇：为页面元素设置class类样式

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

导读：1、class为页面元素的一个属性，通过前面第五篇的内容可知，操作属性需要使用到v-bind指定（也可简写为 :）。 2、先来看一个简单的页面样式内容： vue样式 span style="color: #0000ff"gt;/spanspan style="color: #800000"gt;style /spanspan style="color:

1、class为页面元素的一个属性，通过前面第五篇的内容可知，操作属性需要使用到v-bind指定（也可简写为 :）。

2、先来看一个简单的页面样式内容：

vue样式

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;style </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="text/css"</span><span style="color: #0000ff"&gt;></span><span style="background-color: #f5f5f5; color: #800000"&gt;
    .red</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        color</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; red</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
    .thin</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        font-weight</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; bold</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
    .size</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        font-size</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 30px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;style</span><span style="color: #0000ff"&gt;></span>

</head>
<body>
<div id="app">
<p class="red size">这是Vue样式示例</p>
</div>

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="text/javascript"</span><span style="color: #0000ff"&gt;></span>
    <span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; vm </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;new</span><span style="background-color: #f5f5f5; color: #000000"&gt; Vue({
        el:</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;#app</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;,data:{},methods:{}
    })
</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>

</body>
</html>

里面简单的定义了三个样式类：red、thin、size；接下来我们通过v-bind实现同样的效果。

p标签里我们添加v-bind指令，class里的样式内容为Vue对象里data属性定义的“redStr”值。

data里redStr的值为“red size”，所以运行效果是一样的。

3、看下个例子：

<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:{　　　　　　　　　flag:true　　　　　　　　},methods:{}
    })
</span></script>

这里我感觉虽然用了v-bind指令，但是其没有从data里取数据，其直接把样式定义成了一个固定字符串数组，通过数组内容取对应的样式。其有一个特点就是可以读取三元表达式，根据三元表达式来控制样式是否进行展示。而且我们还可以对这个三元表达式进行简化，用对象的方式来达到同样的效果。代码如下：

4、下个例子：

<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:{
            classObj:{</span>'size':<span style="color: #0000ff"&gt;true</span>,'red':<span style="color: #0000ff"&gt;true</span>,'thin':<span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;}
        },methods:{}
    })
</span></script>

这里通过属性绑定了data对象数据classObj，其值为一个对象，通过true或者false来决定是否应用该样式，这样的代码比较简洁而且灵活度比较高。

5、以上几种方式都可以用来定义class样式，具体使用哪一种可以根据具体需求场景来应用。

每天进步一点点！

（编辑：李大同）

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