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

Posted shibin90

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue学习之路第十一篇:为页面元素设置class类样式相关的知识,希望对你有一定的参考价值。

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue样式</title>
    <script type="text/javascript" src="js/vue.min.js"></script>

    <style type="text/css">
        .red{
            color: red;
        }
        .thin{
            font-weight: bold;
        }
        .size{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p class="red size">这是Vue样式示例</p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{}
        })
    </script>
</body>
</html>

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

<p v-bind:class="redStr">这是Vue样式示例</p>

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

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                redStr:‘red size‘
            },
            methods:{}
        })
    </script>

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

3、看下个例子:

<body>
    <div id="app">
        <p v-bind:class="[‘red‘,flag?‘size‘:‘‘]">这是Vue样式示例</p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
         flag:true 
       }, methods:{} })
</script> </body>

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

<p v-bind:class="[‘red‘,{‘size‘:flag}]">这是Vue样式示例</p>

4、下个例子:

<body>
    <div id="app">
        <p v-bind:class="classObj">这是Vue样式示例</p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                classObj:{‘size‘:true,‘red‘:true,‘thin‘:true}
            },
            methods:{}
        })
    </script>
</body>

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

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

 

每天进步一点点!

 



以上是关于Vue学习之路第十一篇:为页面元素设置class类样式的主要内容,如果未能解决你的问题,请参考以下文章

#Java学习之路——基础阶段(第十一篇)

Python之路第十一篇续前端之CSS补充

我的学习之路_第十一章_字符流

第十一篇:Mysql系列

python之路

Python学习之路