vue里面的class和style的区别

  • Post author:
  • Post category:vue


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

运行效果:



版权声明:本文为Annaluo原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。