1. 前言

1.样式操作是前端开发离不开的话题,今天就总结下

---

2. class操作的几种方式

2.1 直接绑定变量

        <p :class="classA">第一种: 直接绑定变量</p>

---

 Vue.createApp({
            data() {
                return {
                   classA:"one"
              }
      }
}).mount("#app)

---

  .one{
            background-color: pink;
            height: 50px;
            line-height: 50px;
        }

---

标签class属性直接绑定的是 data中的变量,对应的是 样式中class的名字

---

2.2 对象的形式

2.2.1 基础语法

        <p :class="{one:true}">第二种: 对象的形式</p>

key为class的名字,布尔值为真,标签有这个class为key的类
p标签有class为one的样式

2.2.2 变量

        <p :class="{one:true,two:isTwo}">第三种: 多个对象 变量</p>

既然是布尔值,就是可以是条件
isTwo 为变量布尔值

---

2.3 三目运算符

 <p :class="isTwo ?  classA:classB">第四种: 三目</p>

既然是绑定属性 就可以使用表达式

---

2.4 数组

        <p :class="[classA,classB]">第五种: 数组</p>

一个标签可以有多个class,所以自然可以用数组装 标签的 类名

---

3. style

3.1 直接绑定

 <p :style="{
            backgroundColor:'red',
            height:pHeight
        }"> styele  对象</p>

可以直接绑定style值为一个对象,其中的属性可以为data中的数据

---

3.2 变量

        <p :style="styleObj"> 直接使用对象变量</p>

---

  pHeight:"200px",
                    styleObj:{
                        backgroundColor:'green',
                        height:"100px",
                        borderRadius:"50%"
                    }

当然也可以使用变量来绑定

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉