VUE学习六之绑定样式及条件属性

绑定样式及条件属性

  • 绑定样式
  • 条件属性

绑定样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>绑定样式</title><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(2, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.atguigu1{background-color: yellowgreen;}.atguigu2{font-size: 30px;text-shadow:2px 2px 10px red;}.atguigu3{border-radius: 20px;}</style><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 绑定样式:1. class样式写法:class="xxx" xxx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。2. style样式:style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。--><!-- 准备好一个容器--><div id="root"><!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 --><div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/><!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定 --><div class="basic" :class="classArr">{{name}}</div> <br/><br/><!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 --><div class="basic" :class="classObj">{{name}}</div> <br/><br/><!-- 绑定style样式--对象写法 --><div class="basic" :style="styleObj">{{name}}</div> <br/><br/><!-- 绑定style样式--数组写法 --><div class="basic" :style="styleArr">{{name}}</div></div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'尚硅谷',mood:'normal',classArr:['atguigu1','atguigu2','atguigu3'],classObj:{atguigu1:false,atguigu2:false,},styleObj:{fontSize: '40px',color:'red',},styleObj2:{backgroundColor:'orange'},styleArr:[{fontSize: '40px',color:'blue',},{backgroundColor:'gray'}]},methods: {changeMood(){const arr = ['happy','sad','normal']const index = Math.floor(Math.random()*3)this.mood = arr[index]}},})</script></html>

条件属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>条件渲染</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 条件渲染:1.v-if写法:(1).v-if="表达式" (2).v-else-if="表达式"(3).v-else="表达式"适用于:切换频率较低的场景。特点:不展示的DOM元素直接被移除。注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。2.v-show写法:v-show="表达式"适用于:切换频率较高的场景。特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉3.备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。--><!-- 准备好一个容器--><div id="root"><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button><!-- 使用v-show做条件渲染 --><!-- <h2 v-show="false">欢迎来到{{name}}</h2> --><!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> --><!-- 使用v-if做条件渲染 --><!-- <h2 v-if="false">欢迎来到{{name}}</h2> --><!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> --><!-- v-else和v-else-if --><!-- <div v-if="n === 1">Angular</div><div v-else-if="n === 2">React</div><div v-else-if="n === 3">Vue</div><div v-else>哈哈</div> --><!-- v-if与template的配合使用 --><template v-if="n === 1"><h2>你好</h2><h2>尚硅谷</h2><h2>北京</h2></template></div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'尚硅谷',n:0}})</script>
</html>

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

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

相关文章

Appium 安卓环境的配置

目录 前言&#xff1a; 环境准备 写个脚本玩玩 前言&#xff1a; 在使用Appium进行安卓自动化测试之前&#xff0c;需要配置相应的安卓环境。 环境准备 为了避免走弯路&#xff0c;我们先要确保三点&#xff1a; Android SDK API > 17 (Additional features require …

【Python爬虫与数据分析】进阶语法

目录 一、异常捕获 二、迭代器 三、拆包、聚合、映射 四、filter() 函数 五、匿名函数 六、闭包 七、装饰器 一、异常捕获 异常捕获可增强程序的健壮性&#xff0c;即程序在遇到遇到异常的时候并不会做中断处理&#xff0c;而是会将异常抛出&#xff0c;由程序员来分析…

Kafka 入门到起飞 - 核心概念(术语解释)

在kafka之旅&#xff0c;我们会大量讨论Kafka中的术语&#xff0c;那么就让我们先来了解一下这些核心概念 消息(Message)&#xff1a; kafka的数据单元称为消息&#xff0c;相当于DB里的一行数据或一条记录 消息由字节数组组成 批次&#xff1a; 生产者组一批数据再向kafka推送…

C++编程(四) —— OOP

文章目录 前言一、this指针二、构造和析构三、深拷贝浅拷贝浅拷贝深拷贝 编程实践 前言 什么是OOP思想&#xff1f; OOP语言的四大特征&#xff1a; 抽象&#xff0c;封装/隐藏&#xff0c;继承&#xff0c;多态 一、this指针 this指针》类》很多对象 一套成员方法是如何处…

网络层数据链路层协议—网络

文章目录 1.网络层协议—IP协议1.1协议字段 2.数据链路层协议2.1以太网2.2以太网帧2.3mtu2.4ARP协议 1.网络层协议—IP协议 1.1协议字段 &#xff08;1&#xff09;16位标识&#xff1a;mtu规定了需要数据报分片的大小&#xff0c;16位标识来标识原始数据 &#xff08;2&…

键盘控制鼠标移动

记录一下&#xff0c; windows用autohotkeys crtl 方向键 / 空格 &#xff1a;移动鼠标 / 鼠标左击 crtl shift 方向键 / 空格&#xff1a; 快速移动鼠标 / 鼠标右击 ^up::MouseMove,0,-75,0,r ^up::MouseMove,0,-15,0,r ^down::MouseMove,0,75,0,r ^down::MouseMove,0,…

深入学习 Redis - 深挖经典数据类型之 string

目录 前言 一、string 类型 1.1、操作命令 set / get &#xff08;设置 / 获取&#xff09; mset / mget&#xff08;批量 > 设置 / 获取&#xff09; setnx / setex / psetex &#xff08;设置时指定不同方式&#xff09; incr / incrby / decr / decrby/ incrbyfloat…

船舶中压配电板应用弧光保护,可解决母排故障短路问题,对于提高船舶电站的安全性、稳定性,降低经济损失具有重要意义。-安科瑞黄安南

摘要&#xff1a;船舶中压配电板弧光故障导致的设备损坏和停电事故&#xff0c;不仅会造成较大的经济损失&#xff0c;而且严重影响船舶电站的安全稳定运行&#xff0c;威胁船舶电站操作人员的安全。弧光保护是基于电力系统开关柜发生弧光故障时而设计的一套母线保护系统&#…

如何让C++代码也弥漫着炎热的感觉

写一段非常炎热的C代码 当然&#xff0c;这里有一个简单的炎热的C代码示例&#xff0c;它演示了一个循环打印输出的程序&#xff1a; #include <iostream> #include <ctime>int main() {std::cout << "炎热的夏日&#xff0c;热力四溢&#xff01;&quo…

分布式存储系统(Ceph)基础

存储基础 存储设备 DAS&#xff1a;IDE、SATA、SCSI、SAS、USBNAS&#xff1a;NFS、CIFSSAN&#xff1a;SCSI、FC SAN、iSCSI 存储内容包括元数据和数据&#xff0c;名称节点&#xff08;NameNode&#xff09;存放元数据&#xff0c;数据节点&#xff08;DataNode&#xff09…

【布局优化】基于遗传算法的车间布局优化 车间设施布局优化【Matlab代码#50】

文章目录 【获取资源请见文章第5节&#xff1a;资源获取】1. 车间布局优化2. 基于GA的布局优化模型3. 部分代码展示4. 仿真结果展示5. 资源获取 【获取资源请见文章第5节&#xff1a;资源获取】 1. 车间布局优化 车间设施布置的规划一直是工业工程领域不断研究和探索的内容&am…

JavaWeb(5)——HTML、CSS、JS 快速入门

一、JavaScript 对象 二、JavaScript BOM对象 和 DOM对象 关于BOM主要对 Window 和 location 进行说明&#xff1a; 三、JavaScript 事件监听 事件绑定 常见事件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">…

libcurl库使用实例

libcurl libcurl是一个功能强大的跨平台网络传输库&#xff0c;支持多种协议&#xff0c;包括HTTP、FTP、SMTP等&#xff0c;同时提供了易于使用的API。 安装 ubuntu18.04平台安装 sudo apt-get install libcurl4-openssl-dev实例 这个示例使用libcurl库发送一个简单的HTTP …

数据结构——树

数据结构——树 树&#xff08;Tree&#xff09;是一种常见的数据结构&#xff0c;用于存储具有层级关系的数据。树由一组称为节点&#xff08;Node&#xff09;的元素组成&#xff0c;节点之间通过边连接。其中一个节点被称为根节点&#xff08;Root&#xff09;&#xff0c;根…

数据库的基本查询(二)

目录 一、简单查询二、高级查询2.1 分页2.3 结果集排序2.4 去重 三、条件查询3.1 算术运算符3.2 比较运算符3.3 逻辑运算符3.4 按位运算符3.5 WHERE子句的注意事项 一、简单查询 # 查询t_emp表的所有字段 SELECT * FROM t_emp;# 查询t_emp表的指定字段 SELECT ename, empno FR…

谷歌Bard:ChatGPT之外的第三选择

2023年年初&#xff0c;为了对应ChatGPT方面的压力&#xff0c;谷歌Bard仓促上线&#xff0c;此后便进入了低调前行。目前为止已经迭代了9个版本&#xff0c;也就是在近期的版本更新中支持了中文&#xff08;简体/繁体&#xff09;语言&#xff0c;对国内用户可以说又友好了一步…

RabbitMQ log 文件过大 解决方案

log文件地址 C:\Users\Administrator\AppData\Roaming\RabbitMQ\log\rabbitlocalhost.log log文件作用 rabbitlocalhost.log MQ启动、连接日志 rabbitlocalhost-sasl.log saal用来记录Erlang相关的信息&#xff0c;例如查看Erlang崩溃的报告 RabbitMQ官网Log相关介绍 Log…

物理层——数据通信基础知识

1.典型的数据通信模型 2.数据通信的相关术语 2.1 三种通讯方式 2.2 数据传输方式 2.3 常用编码方式&#xff08;数字信号&#xff09; 曼彻斯特编码 将一个码元分成两个相等的间隔&#xff1b; 前一个间隔为 低电平 &#xff0c;后一个间隔为 高电平 表示码元1&#xff1b; 码…

el-dialog 添加loading;avue-form 表单插槽

效果: 第一步&#xff1a;custom-class"publishDialog" 新起一个类名 <el-dialog title"发布配置" custom-class"publishDialog" :visible.sync"publishDialogVisible" width"800px" :append-to-body"true":b…

实现高效数据处理的利器:Java Stream API 的妙用与性能优化

Java作为一门强大的编程语言&#xff0c;提供了丰富的工具和库来处理数据。其中&#xff0c;Java Stream API&#xff08;流式API&#xff09;是一项强大而灵活的特性&#xff0c;它能够简化数据处理过程&#xff0c;并提供高效的性能。本文将深入探索Java Stream API的使用方法…