当前位置: 首页 > news >正文

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>

完整实现效果

在这里插入图片描述

相关文章:

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 …...

开放网关架构演进

作者&#xff1a;庄文弘&#xff08;弘智&#xff09; 淘宝开放平台是阿里与外部生态互联互通的重要开放途径&#xff0c;通过开放的产品技术把阿里经济体一系列基础服务&#xff0c;像水、电、煤一样输送给我们的商家、开发者、社区媒体以及其他合作伙伴&#xff0c;推动行业的…...

torch一些操作

Pytorch文档 Pytorch 官方文档 https://pytorch.org/docs/stable/index.html pytorch 里的一些基础tensor操作讲的不错 https://blog.csdn.net/abc13526222160/category_8614343.html 关于pytorch的Broadcast,合并与分割,数学运算,属性统计以及高阶操作 https://blog.csd…...

ICCV23 | Ada3D:利用动态推理挖掘3D感知任务中数据冗余性

​ 论文地址&#xff1a;https://arxiv.org/abs/2307.08209 项目主页&#xff1a;https://a-suozhang.xyz/ada3d.github.io/ 01. 背景与动因 3D检测(3D Detection)任务是自动驾驶任务中的重要任务。由于自动驾驶任务的安全性至关重要(safety-critic)&#xff0c;对感知算法的延…...

软件工程模型-架构师之路(四)

软件工程模型 敏捷开发&#xff1a; 个体和交互 胜过 过程和工具、可以工作的软件 胜过 面面俱到的文件、客户合作胜过合同谈判、响应变化 胜过 循序计划。&#xff08;适应需求变化&#xff0c;积极响应&#xff09; 敏捷开发与其他结构化方法区别特点&#xff1a;面向人的…...

ubuntu20.04共享文件夹—— /mnt/hgfs里没有共享文件夹

参考文章&#xff1a;https://blog.csdn.net/Edwinwzy/article/details/129580636 虚拟机启用共享文件夹后&#xff0c;/mnt/hgfs下面为空&#xff0c;使用 vmware-hgfsclient 查看设置的共享文件夹名字也是为空。 解决方法&#xff1a; 1. 重新安装vmware tools. 在菜单…...

Redis中的有序集合及其底层跳表

前言 本文着重介绍Redis中的有序集合的底层实现中的跳表 有序集合 Sorted Set Redis中的Sorted Set 是一个有序的无重复值的集合&#xff0c;他底层是使用压缩列表和跳表实现的&#xff0c;和Java中的HashMap底层数据结构&#xff08;1.8&#xff09;链表红黑树异曲同工之妙…...

js 小程序限流函数 return闭包函数执行不了

问题&#xff1a; 调用限流 &#xff0c;没走闭包的函数&#xff1a; checkBalanceReq&#xff08;&#xff09; loadsh.js // 限流 const throttle (fn, context, interval) > {console.log(">>>>cmm throttle", context, interval)let canRun…...

【数据结构】堆的初始化——如何初始化一个大根堆?

文章目录 源码是如何插入的&#xff1f;扩容向上调整实现大根堆代码&#xff1a; 源码是如何插入的&#xff1f; 扩容 在扩容的时候&#xff0c;如果容量小于64&#xff0c;那就2倍多2的扩容&#xff1b;如果大于64&#xff0c;那就1.5倍扩容。 还会进行溢出的判断&#xff0c…...

【韩顺平 零基础30天学会Java】程序流程控制(2days)

day1 程序流程控制&#xff1a;顺序控制、分支控制、循环控制 顺序控制&#xff1a;从上到下逐行地执行&#xff0c;中间没有任何判断和跳转。 Java中定义变量时要采用合法的前向引用。 分支控制if-else&#xff1a;单分支、双分支和多分支。 单分支 import java.util.Scann…...

从入门到精通Python隧道代理的使用与优化

哈喽&#xff0c;Python爬虫小伙伴们&#xff01;今天我们来聊聊如何从入门到精通地使用和优化Python隧道代理&#xff0c;让我们的爬虫程序更加稳定、高效&#xff01;今天我们将对使用和优化进行一个简单的梳理&#xff0c;并且会提供相应的代码示例。 1. 什么是隧道代理&…...

19万字智慧城市总体规划与设计方案WORD

导读&#xff1a;原文《19万字智慧城市总体规划与设计方案WORD》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 感知基础设施 感知基础设施架构由感知范围、感知手…...

[赛博昆仑] 腾讯QQ_PC端,逻辑漏洞导致RCE漏洞

简介 !! 内容仅供学习,请不要进行非法网络活动,网络不是法外之地!! 赛博昆仑是国内一家较为知名的网络安全公司&#xff0c;该公司今日报告称 Windows 版腾讯 QQ 桌面客户端出现高危安全漏洞&#xff0c;据称“黑客利用难度极低、危害较大”&#xff0c;腾讯刚刚已经紧急发布…...

python Requests

Requests概述 官方文档&#xff1a;http://cn.python-requests.org/zh_CN/latest/,Requests是python的HTTP的库&#xff0c;我们可以安全的使用 Requests安装 pip install Requests -i https://pypi.tuna.tsinghua.edu.cn/simple Requests的使用 Respose的属性 属性说明url响…...

【深入解析:数据结构栈的魅力与应用】

本章重点 栈的概念及结构 栈的实现方式 数组实现栈接口 栈面试题目 概念选择题 一、栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。栈中的数…...

安卓机显示屏的硬件结构

显示屏的硬件结构 显示屏的硬件结构主要由背光源、液晶面板和驱动电路构成。可以将液晶面板看成一个三明治的结构&#xff0c;即在两片偏振方向互相垂直的偏光片系统中夹着一层液晶层。自然光源通过起偏器&#xff08;偏光片之一&#xff09;后&#xff0c;变成了垂直方向的偏…...

基于swing的超市管理系统java仓库库存进销存jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于swing的超市管理系统 系统有3权限&#xff1a;管…...

常用系统命令

重定向 cat aa.txt > bbb.txt 将输出定向到bbb.txt cat aaa.txt >> bbb.txt 输出并追加查看进程 ps ps -ef 显示所有进程 例⼦&#xff1a;ps -ef | grep mysql |&#xff1a;管道符 kill pid 结束进程&#xff0c; 如 kill 3732&#xff1b;根据进程名结束进程可以先…...

【Spring专题】Spring之Bean生命周期源码解析——阶段四(Bean销毁)(拓展,了解就好)

目录 前言阅读建议 课程内容一、Bean什么时候销毁二、实现自定义的Bean销毁逻辑2.1 实现DisposableBean或者AutoCloseable接口2.2 使用PreDestroy注解2.3 其他方式&#xff08;手动指定销毁方法名字&#xff09; 三、注册销毁Bean过程及方法详解3.1 AbstractBeanFactory#requir…...

配置Docker,漏洞复现

目录 配置Docker 漏洞复现 配置Docker Docker的配置在Linux系统中相对简单&#xff0c;以下是详细步骤&#xff1a; 1.安装Docker&#xff1a;打开终端&#xff0c;运行以下命令以安装Docker。 sudo apt update sudo apt install docker.io 2.启动Docker服务&#xff1a;运…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...