Vue Class与Style绑定

news2024/11/8 23:54:19

Vue Class与Style绑定

  • 1 Class绑定
    • 1.1 字符串写法
    • 1.2 数组写法
    • 1.3 对象写法
  • 2 Style绑定
    • 2.1 对象写法
    • 2.2 数组写法

1 Class绑定

在Vue中,如果要为某个元素动态添加某个类,并不会使用document.getElementById等选择器将该元素获得,而是使用v-bind:class(简写:class)来进行改变。

1.1 字符串写法

字符串写法适用于样式的类名不确定,需要动态指定的情况。用法如下:

<!-- 写法一:-->
<div class="xxx1" v-bind:class="xxx2"></div>
<!-- 写法二: -->
<div class="xxx1" :class="xxx2"></div>

xx2需要在data中进行声明,最后,元素上的class就是xxx1 normal

new Vue({
    ...
    data: {
        xxx2: "normal"
    }
})

例如,下面元素有一个基本的类basic,显示字体颜色为红色,还有两个类bigFontfont-size,效果分别是font-size变为30px和background-colorpink,点击该元素,会切换两个类,默认最先开始显示bigFont
三个类具体如下:

.basic {
    color: red;
}
.bigFont {
    font-size: 30px;
}
.colorFont {
    background-color: pink;
}

具体代码如下:

<div id="app">
    <div class="basic" :class="addClass" @click="changeClass">橘猫吃不胖</div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            addClass: "bigFont"
        },
        methods: {
            changeClass() {
                if (this.addClass === "bigFont") {
                    this.addClass = "colorFont";
                } else {
                    this.addClass = "bigFont";
                }
            }
        },
    })
</script>

在这里插入图片描述
从效果图可以看出,元素的classbasic bigFontbasic colorFont来回切换。

1.2 数组写法

数组写法适用于绑定的类个数不确定,类名也不确定的情况。比如class1class2class3三个类,元素可能只用1,也可能用1、3,也可能全用,这样的情况就使用数组写法。具体用法如下:

<!-- 写法一: -->
<div class="xxx1" v-bind:class="classArr"></div>
<!-- 写法二: -->
<div class="xxx1" :class="classArr"></div>

其中,classArr是在data中定义的数组,数组中存放的是要用到的类名,涉及到几个类,就在数组中传几个类。

new Vue({
    ...
    data: {
        classArr: ["class1", "class2", "class3", ...]
    }
})

接下来可以通过操作数组的增删改查来修改数组,达到更改类的效果。

例如,还是3个类basicbigFontcolorFont,新增3个按钮,点击按钮可以动态添加这三个类,默认效果三个类都存在。
三个类具体如下:

.basic {
    color: red;
}
.bigFont {
    font-size: 30px;
}
.colorFont {
    background-color: pink;
}

具体代码如下:

<div id="app">
    <div :class="classArr">橘猫吃不胖</div>
    <button @click="changeColor">更改颜色</button>
    <button @click="changeFontSize">更改大小</button>
    <button @click="changeBack">更改背景</button>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            classArr: ["basic", "bigFont", "colorFont"]
        },
        methods: {
            changeColor() { // 更改颜色
                let index = this.classArr.indexOf("basic");
                if (index === -1) {
                    this.classArr.push("basic");
                } else {
                    this.classArr.splice(index, 1);
                }
            },
            changeFontSize() { // 更改字体大小
                let index = this.classArr.indexOf("bigFont");
                if (index === -1) {
                    this.classArr.push("bigFont");
                } else {
                    this.classArr.splice(index, 1);
                }
            },
            changeBack() { // 更改字体背景
                let index = this.classArr.indexOf("colorFont");
                if (index === -1) {
                    this.classArr.push("colorFont");
                } else {
                    this.classArr.splice(index, 1);
                }
            }
        },
    })
</script>

在这里插入图片描述

1.3 对象写法

对象写法适用于绑定的类个数确定,名字也确定,但是要动态的判断是否使用的情况。用法如下:

<!-- 写法一: -->
<div class="xxx1" v-bind:class="classObj"></div>
<!-- 写法二: -->
<div class="xxx1" :class="classObj"></div>

classObj是在data中定义的对象,具体形式如下:

new Vue({
    ...
    data: {
        classObj: {
            class1: true / false,
            class2: true / false,
            ...
        }
    }
})

其中,class1class2…是类名。

例如,3个类basicbigFontcolorFont,显示bigFontcolorFont,不显示basic,具体代码如下:

<div id="app">
    <div :class="classObj">橘猫吃不胖</div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            classObj: {
                basic: false, // 不显示
                bigFont: true, // 显示
                colorFont: true // 显示
            }
        }
    })
</script>

在这里插入图片描述

2 Style绑定

为某个元素添加样式时,也可以使用v-bind:style(简写:style)来进行样式上的绑定。

2.1 对象写法

可以为v-bind:style直接传一个对象,健是样式属性,值是样式值。

<!-- 写法一: -->
<div v-bind:style="{ 属性1: 属性值1, 属性2: 属性值2 + 'px' }"></div>
<!-- 写法二: -->
<div :style="{ 属性1: 属性值1, 属性2: 属性值2 + 'px' }"></div>

示例代码:

<div id="app">
    <div :style="{ color: 'orange', fontSize: fontSize + 'px'}">橘猫吃不胖</div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            fontSize: 30,
        }
    })
</script>

在这里插入图片描述
或者在data中定义v-bind:style中的对象,具体方式如下:

<div v-bind:style="styleObj"></div>
<script>
    new Vue({
        ...
        data: {
            styleObj: {
                属性1: 属性值1,
                属性2, 属性值2,
                ...
            }
        }
    })
</script>

上面的例子可以写成如下形式:

<div id="app">
    <div v-bind:style="styleObj">橘猫吃不胖</div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            styleObj: {
                color: "orange",
                fontSize: "30px"
            }
        }
    })
</script>

2.2 数组写法

可以为v-bind:style传入数组,数组中是样式对象,具体如下:

<!-- 写法一: -->
<div v-bind:style="styleArr"></div>
<!-- 写法二: -->
<div :style="styleArr"></div>

styleArr是样式对象的数组,在data中定义,具体形式如下:

new Vue({
    ...
    data: {
        styleArr: [
            {
                属性1: 属性值1,
                属性2: 属性值2,
                ...
            }, {
                属性3: 属性值3,
                ...
            }
            ...
        ]
    }
})

示例代码:

<div id="app">
    <div v-bind:style="styleArr">橘猫吃不胖</div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            styleArr: [
                {
                    fontSize: "30px",
                    color: "red"
                }, {
                    backgroundColor: "pink"
                }
            ]
        }
    })
</script>

在这里插入图片描述
或者可以写成以下形式:

<!-- 写法一: -->
<div v-bind:style="[styleArr1, styleArr2...]"></div>
<!-- 写法二: -->
<div :style="[styleArr1, styleArr2...]"></div>

styleArr1styleArr2…是在data中定义的样式对象

new Vue({
    ...,
    data: {
        styleArr1: {
            属性1: 属性值1,
            属性2: 属性值2,
            ...
        },
        styleArr2: {
            属性3: 属性值3,
            ...
        },
        ...
    }
})

上面的例子可以写成如下形式:

<div id="app">
    <div v-bind:style="[arr1, arr2]">橘猫吃不胖</div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            arr1: {
                fontSize: "30px",
                color: "red"
            },
            arr2: {
                backgroundColor: "pink"
            }
        }
    })
</script>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/59003.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Tomcat突然停止运行/Server Tomcat v8.5 Server at localhost fail

Server Tomcat v8.5 Server at localhost failed to start./org.apache.catalina.startup.Catalina start 严重: 所必需的服务组件启动失败&#xff0c;所以无法启动Tomcat 1.使用eclipse写系统时突然无法运行jsp文件 2.查看任务管理器&#xff0c;将其启动&#xff0c;依旧不…

101-115-hive-优化执行计划表优化

101-压缩存储-优化&#xff1a; 执行计划&#xff08;Explain&#xff09; 1&#xff09;基本语法 EXPLAIN [EXTENDED | DEPENDENCY | AUTHORIZATION] query &#xff08;2&#xff09;查看详细执行计划 hive (default)> explain extended select * from emp; hive (de…

OpenGL 图像绿幕抠图

目录 一.OpenGL 图像绿幕抠图 1.IOS Object-C 版本1.Windows OpenGL ES 版本2.Windows OpenGL 版本 二.OpenGL 图像绿幕抠图 GLSL Shader三.猜你喜欢 零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 基础 零基础 OpenGL ES 学习路线推荐 : OpenGL E…

Linux 内核(Kernel)组成分析

【好文推荐】 需要多久才能看完linux内核源码&#xff1f; 浅析linux内核网络协议栈--linux bridge 深入理解SR-IOV和IO虚拟化 一文了解Linux上TCP的几个内核参数调优 概述Linux内核驱动之GPIO子系统API接口 一、Linux内核简介 Linux 内核采用宏内核架构&#xff0c;即 Linux …

Springboot利用Security做OAuth2授权验证

OAuth2获取授权令牌&#xff08;token&#xff09;通常有四种方式&#xff1a;授权码模式&#xff0c;简化模式&#xff0c;客户端模式&#xff0c;和密码模式。针对自己系统内用户的登录&#xff0c;通常使用密码模式进行授权。 我们利用Spring Security OAuth2来制作一个授权…

[附源码]Python计算机毕业设计Django健身生活系统论文

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

【Java】从源码分析fail-fast和fail-safe是如何产生的

文章目录fail-fastfail-safe这个问题出现在使用Iterator迭代器的时候。如果某一个集合在使用的时候&#xff0c;另一个线程修改了这个集合&#xff0c;会出现什么情况呢&#xff1f;因此就出现了两种解决策略fail-fast 一旦发现遍历的同时其它人来修改&#xff0c;则立刻抛异常…

【微信小程序】页面跳转、组件自定义、获取页面参数值

&#x1f3c6;今日学习目标&#xff1a;第十七期——页面跳转、组件自定义、获取页面参数值 &#x1f603;创作者&#xff1a;颜颜yan_ ✨个人主页&#xff1a;颜颜yan_的个人主页 ⏰预计时间&#xff1a;25分钟 &#x1f389;专栏系列&#xff1a;我的第一个微信小程序 文章目…

推荐系统相关论文阅读整理

文章题目 基于协同过滤的微信点餐推荐系统的设计与实现 作者 张彭飞 吉林大学 期刊论文在线阅读—中国知网 (cnki.net)摘要关键词协同过滤;推荐系统;Docker;PXC;RedisCluster;名词解释文献研究目的推荐系统应用现状 在1990 年代&#xff0c;为了解决邮件过载问题&#xff0c…

如此简单的k8s,快速玩转ingress

如此简单的k8s&#xff0c;快速玩转ingress NodePort 可以实现的功能和缺陷&#xff1a; 功能、在每一个节点上面都会启动一个端口&#xff0c;在访问的时候通过任何的节点&#xff0c;通过节点加ip的形式实现访问 缺点、也就是说每个端口只能使用一次&#xff0c;一个端口对应…

传输层协议 —— TCP(图解1)

目录 一、TCP的基本认识 1. TCP头部格式 2. TCP协议的特点 3. 什么是TCP连接 4. TCP如何封装与分用 二、通过序列号和确认应答号提高可靠性 1. 32位序列号 2. 32位确认应答号 3. 保证可靠性 4. 为什么序列号和确认应答号是单独的字段 三、窗口大小 1. TCP的发送和…

[附源码]JAVA毕业设计敬老院管理系统(系统+LW)

[附源码]JAVA毕业设计敬老院管理系统&#xff08;系统LW&#xff09; 目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&a…

ubuntu 实现远程开关机

1. 需求 家里厅里有三台linux主机在跑虚拟机, 一台windows主机在跑wsl2 - ubuntu 20.04 分别是 硬件网络连接方式OSip虚拟机sEUC i5 7250U 16Gwifiwin1010.0.1.223wsl2 - 随机ipMineFine S500 R7 5800H 64G网线Zorin OS 16.2 (Ubuntu 20.04 LTS)10.0.1.198vm1 - 10.0.1.156 …

统计信号处理基础 习题解答6-14

题目&#xff1a; 噪声过程由IID零均值&#xff0c;PDF为 的随机变量组成&#xff0c;其中0<ε<1 。这样的PDF成为高斯混合PDF&#xff0c;它用来模拟 具有方差为 的高斯噪声以及剩余的服从方差 的高斯噪声。一般 &#xff0c;且ε≪1 &#xff0c;所以具有方差为 的背…

[Java安全]—Tomcat反序列化注入回显内存马

前言 在之前学的tomcat filter、listener、servlet等内存马中&#xff0c;其实并不算真正意义上的内存马&#xff0c;因为Web服务器在编译jsp文件时生成了对应的class文件&#xff0c;因此进行了文件落地。 所以本篇主要是针对于反序列化进行内存马注入来达到无文件落地的目的…

[附源码]计算机毕业设计JAVA学生信息管理系统

[附源码]计算机毕业设计JAVA学生信息管理系统 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybati…

交流转直流LED驱动芯片 MT7930 SOP8

隔离LED驱动ic芯片 MT7930 SOP8 交流转直流LED驱动芯片 MT7930的描述&#xff1a; MT7930是一个单级、高功率因数&#xff0c;源边控制交流转直流LED驱动芯片。只需极少的外围器件感应源边的电学信息&#xff0c;就可以精确地调制LED电流&#xff0c;而不需要光耦及副边感应器件…

5.javase_循环语句

一.for循环语句 (1)for循环语句 1.1 for循环语句格式&#xff1a; for(初始化语句a;条件判断语句b;条件控制语句c) { 循环体语句d; } 1.2 for循环语句范例&#xff1a; for (int i 1; i < 5; i 1) { System.out.println(“HelloWorld”); } 1.3 for循环语句执行顺序 (2)…

6.每天进步一点点---Python爬虫urllib库

文章未完成待续 urllib 库是 Python 内置的一个 HTTP 请求库。在 Python 2.x 中&#xff0c;是由 urllib 和 urllib2 两 个库来实现请求发送的&#xff0c;在 Python 3.x 中&#xff0c;这两个库已经合并到一起&#xff0c;统一为 urllib 了。 urllib 库由四个模块组成。 re…

LeetCode 69. x 的平方根

&#x1f308;&#x1f308;&#x1f604;&#x1f604; 欢迎来到茶色岛独家岛屿&#xff0c;本期将为大家揭晓LeetCode 69. x 的平方根 &#xff0c;做好准备了么&#xff0c;那么开始吧。 &#x1f332;&#x1f332;&#x1f434;&#x1f434; 一、题目名称 69. x 的平方根…