vue里面的class和style的区别

一、class：1，直接传递一个数组。注意：这里的class需要使用v-bind做数据绑定。2，在数组中使用表达式3，在数组中使用对象来代替三元表达式，提高代码的可读性4，在为class使用v-bind绑定对象的时候，对象的属性是类名，对象的属性可带引号，也可不带引号，属性的值是一个标识符。二、style1，直接在元素上通过':style'的形式，书写样式对象2，将样式对象，定义到'data'中，

Annaluo

4232人浏览 · 2022-02-06 08:57:31

Annaluo · 2022-02-06 08:57:31 发布

一、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>

运行效果：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^