vue里面的class和style的区别

Annaluo

已于 2022-02-06 09:27:15 修改

阅读量4.2k

点赞数 3

分类专栏： vue相关文章标签： vue.js javascript 前端前端框架 ecmascript

于 2022-02-06 08:57:31 首次发布

本文链接：https://blog.csdn.net/Annaluo/article/details/122795643

版权

vue相关专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、class：

1，直接传递一个数组。注意：这里的class需要使用v-bind做数据绑定。

2，在数组中使用表达式

3，在数组中使用对象来代替三元表达式，提高代码的可读性

4，在为class使用v-bind绑定对象的时候，对象的属性是类名，对象的属性可带引号，也可不带引号，属性的值是一个标识符。

二、style

1，直接在元素上通过':style'的形式，书写样式对象

2，将样式对象，定义到'data'中，并直接引用到‘:style’中

3，在':style'中通过数组，引用多个'data'上的样式对象

class代码演示：（直接复制到HTML即可运行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-知识点补充class</title>
    <style>
        .box1{
            width: 300px;
            height: 40px;
            border: 1px solid olive;
        }
        .box2{
            /* background-color: bisque; */
            font-size: 30px;
        }
        .box3{
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div id="app">
        <p class="box1 box2">众里寻他千百度......</p>
        <p :class="['box1', 'box2']">众里寻他千百度......</p>
        <p :class="['box1', 'box2', isShow ? 'box3': '' ]">众里寻他千百度......</p>
        <p :class="[{'box1':isShow}]">众里寻他千百度......</p>
        <p :class="classObj">众里寻他千百度......</p>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                isShow:true,
                classObj:{'box1':true,'box2':true,'box3':true}
            }
        })
    </script>
</body>
</html>

运行效果：

style演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-知识点补充style</title>
</head>
<body>
    <div id="app">
        <p style="font-size: 20px; background-color: aquamarine;">hhhhh哈哈哈哈你是谁呀</p>
        <p :style="style1">hhhhh哈哈哈哈你是谁呀</p>
        <p :style="[style1,style2]">hhhhh哈哈哈哈你是谁呀</p>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                style1:{'background-color':'green','font-size':'40px'},
                style2:{'font-style':'italic'}
            }
        })
    </script>
</body>
</html>

运行效果：