Vue教程(五):样式绑定——class和style

1、样式代码准备

样式提前准备

<style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg, yellow, pink, orange, yellow);}.sad{border: 4px dashed rgb(1, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.nobug1{background-color: yellowgreen;}.nobug2{font-size: 30px;text-shadow: 2px 2px 10px red;}.nobug3{border-radius: 5px;}</style>

2、绑定class样式

绑定class样式——字符串写法

适用于:样式的类名不确定,需要动态指定

html:

<!--    绑定class样式——字符串写法,适用于:样式的类名不确定,需要动态指定--><div class="basic" :class="mood" @click="changeMood">{{label}}</div>

js:

mood: 'normal',
methods:{changeMood(){const arr = ['normal', 'happy', 'sad'];// Math.random()产生的数值介于 0,1之间,可以等于0,但是不会等于1;let index = Math.floor(Math.random() * 3);this.mood = arr[index];}}

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HIpwm7wQ-1692628922705)(C:\Users\wangliukun\AppData\Roaming\Typora\typora-user-images\image-20230821223709550.png)]

绑定class样式——数组写法

适用于:要绑定的样式个数不确定,名字也不确定

html:

<div class="basic" :class="classArr">{{label}}</div>

js

classArr: ['nobug1', 'nobug2', 'nobug3'],

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tyjmmP0x-1692628922706)(C:\Users\wangliukun\AppData\Roaming\Typora\typora-user-images\image-20230821223810320.png)]

绑定class样式——对象写法

适用于:要绑定的样式个数确定,名字也确定,但需要动态决定用不用

html

<div class="basic" :class="classObj">{{label}}</div>

js

classObj: {nobug1: false,nobug2: true,},

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BQP4KxNx-1692628922707)(C:\Users\wangliukun\AppData\Roaming\Typora\typora-user-images\image-20230821223856205.png)]

3、绑定style样式

绑定style样式——对象写法

html

<!--    绑定style样式——对象写法--><div class="basic" :style="styleObj">{{label}}</div>

js

styleObj:{fontSize: '40px',},

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aRclFNG7-1692628922707)(C:\Users\wangliukun\AppData\Roaming\Typora\typora-user-images\image-20230821223438445.png)]

绑定style样式——数组写法

html

<!--    绑定style样式——数组写法--><div class="basic" :style="styleArr">{{label}}</div>

js

styleArr: [{fontSize: '40px',},{color: 'red'}]

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-odwStcDR-1692628922708)(C:\Users\wangliukun\AppData\Roaming\Typora\typora-user-images\image-20230821223529233.png)]

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/vue.js"></script><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg, yellow, pink, orange, yellow);}.sad{border: 4px dashed rgb(1, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.nobug1{background-color: yellowgreen;}.nobug2{font-size: 30px;text-shadow: 2px 2px 10px red;}.nobug3{border-radius: 5px;}</style>
</head>
<body>
<div id="root"><!--    绑定class样式——字符串写法,适用于:样式的类名不确定,需要动态指定--><div class="basic" :class="mood" @click="changeMood">{{label}}</div><br/><br/><!--    绑定class样式——数组写法,适用于:要绑定的样式个数不确定,名字也不确定--><div class="basic" :class="classArr">{{label}}</div><br/><br/><!--    绑定class样式——对象写法,适用于:要绑定的样式个数确定,名字也确定,但需要动态决定用不用--><div class="basic" :class="classObj">{{label}}</div><br/><br/><!--    绑定style样式——对象写法--><div class="basic" :style="styleObj">{{label}}</div><br/><br/><!--    绑定style样式——数组写法--><div class="basic" :style="styleArr">{{label}}</div><br/><br/>
</div>
<script>// 设置为 false 以阻止 vue 在启动时生成生产提示。Vue.config.productionTip = false;// 创建Vue实例new Vue({// el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串el: '#root',data:{label: '不写八个',mood: 'normal',classArr: ['nobug1', 'nobug2', 'nobug3'],classObj: {nobug1: false,nobug2: true,},styleObj:{fontSize: '40px',},styleArr: [{fontSize: '40px',},{color: 'red'}]},methods:{changeMood(){const arr = ['normal', 'happy', 'sad'];// Math.random()产生的数值介于 0,1之间,可以等于0,但是不会等于1;let index = Math.floor(Math.random() * 3);this.mood = arr[index];}}})
</script>
</body>
</html>

完整实现效果

在这里插入图片描述

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

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

相关文章

腾讯云下一代CDN -- EdgeOne加速MinIO对象存储

省流 使用MinIO作为EdgeOne的源站。 背景介绍 项目中需要一个兼容S3协议的对象存储服务&#xff0c;腾讯云的COS虽然也兼容S3协议&#xff0c;但是也只是支持简单的上传下载&#xff0c;对于上传的时候同时打标签这种需求&#xff0c;就不兼容S3了。所以决定自建一个对象存储…

学习JAVA打卡第四十天

对象的字符串表示 在此类中我们讲过&#xff0c;所有的类都默认是java.lang包中object类的子类或间接子类。 Object类有一个public String toString&#xff08;&#xff09;方法,一个对象通过调用该方法可以获得该对象的字符串表示。一个对象调用toString法&#xff08;&…

JMeter - 接口压力测试工具简单使用

【启动前配置】 启动JMeter前可以先配置语言和编码: 修改:E:\JMeter\apache-jmeter-5.5\bin\jmeter.properties文件中: 1.language=en # 指定语言 language=zh_CN 2.sampleresult.default.encoding=ISO-8859-1 # 指定编码 UTF-8 sampleresult.default.encoding=UTF-8 也…

CUDA Bug<三>当__global__函数出现里面所有输出的数组都随机赋值了

问题具体描述&#xff1a; eg. __global__ void Updata_HomJm(float* H,float *HJm,float* fr,float *gr,float* ur,float* urgrJm,float*wpd,float *w, float *wJm,int n) { int idx blockIdx.x*blockDim.x threadIdx.x;float t 0.0;//H*zpint idx_Ai idx*n;for (int j…

AURIX TriCore内核架构学习笔记

名词缩写 ISA - Instruction Set Architecture&#xff0c;指令集架构PC - Program Counter, holds the address of the instruction that is currently runningGPRs - 32 General Purpose RegistersPSW - Program Status WordPCXI - Previous Context InformationCSA - Conte…

【Python编程】将同一种图片分类到同一文件夹下,并且将其分类的路径信息写成txt文件进行保存

注&#xff1a;数据结构同上一篇博文类似 一、代码 import os import cv2 import shutilpath0os.getcwd()\\apple\\RGB path1os.getcwd()\\apple\\tof_confidence # path2os.getcwd()\\apple\\tof_depth # path3os.getcwd()\\apple\\tof_depthRGB # path4os.getcwd()\\apple\…

文献复现--freewater-DTI-单壳数据的自由水成像

文献链接:https://www.nature.com/articles/s41598-021-86505-7 import os, sys import numpy as np import matplotlib.pyplot as plt from dipy.core.gradients import gradient_table from dipy.data import get_fnames from dipy.io.gradients import read_bvals_bvecs f…

logback-spring.xml

<?xml version"1.0" encoding"UTF-8"?> <configuration> <appender name"stdout" class"ch.qos.logback.core.ConsoleAppender"> <encoder> <springProfile name"dev"> <pattern>%d{…

HTML番外篇(五)-移动端适配

一、媒体查询 1.认识媒体查询 媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。 你可以根据设备的类型&#xff08;比如屏幕设备、打印机设备&#xff09;或者特定的特性(比如屏幕的宽度)来修改你的页面。 媒体查询的使用方式主要有三种&#xff1a;…

C#使用.Net Core进行跨平台开发

使用 .NET Core 进行跨平台开发是一种灵活的方法&#xff0c;可以在多个操作系统上运行 C# 应用程序。以下是在 C# 中使用 .NET Core 进行跨平台开发的一般步骤&#xff1a; 安装 .NET Core SDK&#xff1a; 在开始之前&#xff0c;需要安装适用于操作系统的 .NET Core SDK。可…

Linux socket网络编程概述 和 相关API讲解

socket网络编程的步骤 大体上&#xff0c;连接的建立过程就是&#xff1a;服务器在确定协议类型后&#xff0c;向外广播IP地址和端口号&#xff0c;并监听等待&#xff0c;直到客户端获取了IP地址和端口号并成功连接&#xff1a; 使用socket来进行tcp协议的网络编程的大体步骤…

Qt快速学习(二)--QMainWindow,对话框,布局管理器,常用控件

目录 1 QMainWindow 1.1 菜单栏 1.2 工具栏 1.3 状态栏 1.4 铆接部件 1.5 核心部件&#xff08;中心部件&#xff09; 1.6 资源文件 2 对话框QDialog 2.1 基本概念 2.2 标准对话框 2.3 自定义消息框 2.4 消息对话框 2.5 标准文件对话框 3 布局管理器 3.1 系统…

axios / fetch 实现 stream 流式请求

axios 是一个支持node端和浏览器端的易用、简洁且高效的http库。本文主要介绍 axios 如何实现 stream 流式请求&#xff0c;注意这里需要区分 node 环境和浏览器环境。 一、node端 代码演示&#xff1a; const axios require(axios);axios({method: get,url: http://tiven.c…

软考高级系统架构设计师系列论文八十三:论软件设计模式的应用

软考高级系统架构设计师系列论文八十三:论软件设计模式的应用 一、软件设计模式相关知识点二、摘要三、正文四、总结一、软件设计模式相关知识点 软考高级系统架构设计师系列之:面向构件的软件设计,构件平台与典型架构

Spring Boot 整合MyBatis-Plus

&#x1f600;前言 本篇博文是关于Spring Boot 整合MyBatis-Plus的&#xff0c;希望你能够喜欢&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的…

SD BAPI--SD_SALESDOCUMENT_CREATE 销售订单退/换货

SD BAPI–SD_SALESDOCUMENT_CREATE 销售订单退/换货 FUNCTION zsdfu004. *“---------------------------------------------------------------------- "“本地接口&#xff1a; *” IMPORTING *” VALUE(I_CGSQD) TYPE CHAR20 OPTIONAL *" VALUE(I_ZNAME) TYPE CH…

储能运行约束的Matlab建模方法

最近一段时间有很多人问我最优潮流计算中储能系统的建模方法。部分朋友的问题我回复了&#xff0c;有些没有回消息的&#xff0c;我就不再一一回复了&#xff0c;在这里我写一篇博客统一介绍一下。 1.储能系统介绍 首先&#xff0c;让【GPT】简单介绍一下储能系统&#xff1a;…

Maven解析

目录 Maven的概念 Pom 项目坐标 仓库 Maven环境搭建 安装jdk 配置maven 配置本地仓库地址 配置阿里云 maven 镜像仓库&#xff0c;下载速度更快 在idea中配置maven ​编辑 pom中名词解释 Maven命令 Maven的概念 Maven 是 Apache 软件基金会的一个开源项目,是一个…

PhantomJS+java 后端生成echart图表的图片

PhantomJSjava 后端生成echart图表的图片 前言源码效果实现echarts-convertPhantomJS实现echarts截图得到图片java延时读取base64数据 参考 前言 该项目仅用作个人学习使用 源码 地址 docker镜像&#xff1a; registry.cn-chengdu.aliyuncs.com/qinjie/java-phantomjs:1.0 …

航空电子设备中的TSN通讯架构—直升机

前言 以太网正在迅速取代传统网络&#xff0c;成为航空电子设备和任务系统的核心高速网络。本文提出了以太网时间敏感网络(TSN)在航空电子设备上应用的技术优势问题。在实际应用中&#xff0c;TSN已成为一个具有丰富的机制和协议的工具箱&#xff0c;可满足与时间和可靠性相关…