09 在Vue中使用样式

最新推荐文章于 2022-10-22 20:32:49 发布

Civitasv

最新推荐文章于 2022-10-22 20:32:49 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue json css

本文链接：https://blog.csdn.net/qq_40996400/article/details/104183543

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

传统方式样式的添加

在不使用Vue时，我们为一个Dom元素添加样式有两种方式：

为Dom元素添加伪类class
使用style属性

如下代码：

<html>

<head>
    <meta charset="utf-8">
    </meta>
    <title>vue样式使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        /* 红色 */
        .red {
            color: red;
        }

        /* 斜体 */
        .italic {
            font-style: italic;
        }

        .active {
            /* 字符间距 */
            letter-spacing: 0.5em;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 添加伪类class -->
        <h1 class="red italic">伪类class</h1>
        <!-- style属性 -->
        <h2 style="color: blue;">添加style属性</h2>
    </div>
</body>

</html>

接下来学习在Vue中添加样式。

首先在Vue中添加样式需要使用v-bind指令，需要注意的是，应为伪类class添加引号，否则vue会将其当作变量，这时就会报错，下面对vue中添加样式作进一步的讨论。

一使用伪类添加样式

<h1 :class="'italic'">添加单个伪类</h1>
<h1 :class="['italic','red']">添加多个伪类</h1>
<script>
        var vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
            }
        });
</script>

三元表达式

<h1 :class="['italic',flag?'active':'']">三元表达式</h1>
<script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag: true
            },
            methods: {
            }
        });
</script>

JSON数据格式

使用三元表达式代码量较大，我们还可以采用JSON数据格式进行编写，即：

<h1 :class="['italic',{'active':flag}]">使用对象</h1>

这样写可读性很好。

也可以全部使用JSON数据格式，即：

<h1 :class="{italic:true,active:true}">全部使用对象</h1>

这样写可读性也很好。

进一步讨论，其实我们还可以把{italic:true,active:true}这个字符串当作一个变量看待，然后在Dom元素中引用这个变量就好了，具体操作为：

 <h1 :class="classObj">全部使用对象</h1>
 <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag: true,
                classObj: {italic:true,active:true}
            },
            methods: {

            }
        });
</script>

这样写代码看起来就会十分的简洁了。

二使用style属性添加样式

 <h1 :style="{color:'red'}">使用style添加样式</h1>

当然了，也可以将字符串{color:'red'}定义为data中的一个变量，然后引用即可。

全部代码如下：

<html>

<head>
    <meta charset="utf-8">
    </meta>
    <title>vue样式使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        /* 红色 */
        .red {
            color: red;
        }

        /* 斜体 */
        .italic {
            font-style: italic;
        }

        .active {
            /* 英文字符间距 */
            letter-spacing: 0.5em;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 添加伪类class -->
        <h1 class="red italic">伪类class</h1>
        <!-- style属性 -->
        <h2 style="color: blue;">添加style属性</h2>

        <!-----------------在Vue中使用伪类添加样式------------>
        <h1 :class="'italic'">Vue添加单个伪类</h1>
        <h1 :class="['italic','active']">Vue添加多个伪类</h1>
        <h1 :class="['italic',flag?'active':'']">使用三元表达式</h1>
        <h1 :class="classObj">使用对象</h1>
        <h1 :class="{italic:true,active:flag}">全部使用对象</h1>
        <!-- 在Vue中使用style添加样式-->
        <h1 :style="{'color':'red'}">使用style添加样式</h1>
        <h1 :style='[styleObj,styleObj2]'>使用style添加多个变量样式</h1>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag: true,
                classObj: [' italic', { 'active': true }],
                styleObj: { 'color': 'red' },
                styleObj2: { 'letter-spacing': '0.5em' }
            }, methods: {}
        }); </script>
</body>

</html>

总结

观察这两种方式，我们可以总结出一些规律：

v-bind属性值中未加引号的都被解析为变量
但上一点在使用JSON数据格式时并不严格遵守，事实上，经过测试，应用JSON数据格式时，加不加引号都不会解析为变量，即{italic:true,active:flag}和{'italic':'true','active':flag}两种写法都是可以的
根据以上两点，不如严格遵守：对于变量不加引号，否则加上引号
新增： 应十分注意的是，data中一个变量无法引用另一个变量的值，即classObj: [' italic', { 'active': this.flag }]这种写法是不正确的，事实上，this.flag会是undefined，因为这时候并未初始化