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

vue样式绑定（v-if）

news 文章来源：https://blog.csdn.net/qq_62512326/article/details/129288586 2024/11/17 5:34:21

文章目录

  • 一.第一次用vue框架
    • 二.要求:
      • 1.定义两种样式，一种描述正确的状态，一种描述错误的状态。
      • 2.在结构代码中定义一个块，实现绑定正确的样式状态。
      • 3.定义一个按钮，实现正确和错误两种状态的class切换。
    • 三.源代码
    • 四.效果

一.第一次用vue框架

二.要求:

1.定义两种样式，一种描述正确的状态，一种描述错误的状态。

2.在结构代码中定义一个块，实现绑定正确的样式状态。

3.定义一个按钮，实现正确和错误两种状态的class切换。

三.源代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script><!-- <script src="https://unpkg.com/vue@next"></script> --><style>.red-box{background-color: brown; color: white; padding: 10px;width: 500px;}.pink-box{background-color: pink; color: white; padding: 10px;width: 500px;}</style>
</head>
<body><div id="Application" ><div class="red-box" v-if="isShow"><h1>red box</h1><p>你好！</p></div><div class="pink-box" v-else="false"><h1>pink box</h1><p>我不好!</p></div><div><button @click="toggle">切换</button></div></div>     
</body>
</html><script>// 定义一个vue组件const App = {data(){return{isShow:true,}},methods: {toggle(){this.isShow = ! this .isShow// this.isShow1 = ! this.isShow1// this.isShow2 = ! this.isShow2}}}// 将vue组件绑定到页面上id为Application的元素上Vue.createApp(App).mount("#Application")
</script>

四.效果

在这里插入图片描述

在这里插入图片描述

相关文章：

vue样式绑定（v-if）

文章目录一.第一次用vue框架二.要求:1.定义两种样式&#xff0c;一种描述正确的状态&#xff0c;一种描述错误的状态。2.在结构代码中定义一个块&#xff0c;实现绑定正确的样式状态。3.定义一个按钮&#xff0c;实现正确和错误两种状态的class切换。三.源代码四.效果一.第一次…...

编程日记 2023/3/2 9:56:53

无需公网IP，安全稳定实现U8C异地访问

用友是全球领先的企业云服务与软件提供商&#xff0c;在财务、人力、供应链、采购、制造、营销、研发、项目、资产、协同等领域为客户提供数字化、智能化、社会化的企业云服务产品与解决方案。 U8C是用友针对成长型、创新型企业&#xff0c;提供企业级ERP整体解决方案。在系统…...

编程日记 2023/3/2 9:55:46

Graph Neural Network(GNN)图神经网络

Graph Neural Network(GNN)图神经网络&#xff0c;是一种旨在对图结构数据就行操作的深度学习算法。它可以很自然地表示现实世界中的很多问题&#xff0c;包括社交网络&#xff0c;分子结构和交通网络等。GNN旨在处理此类图结构数据&#xff0c;并对图中的节点和边进行预测或执…...

编程日记 2023/3/2 9:54:34

JSTL核心库的简单使用

JSTL核心库的简单使用 7.1考试重点 7.1.1c:out输出数据 考试重点就是c的相关的 jar包下载地址:Apache Tomcat - Apache Taglibs Downloads 看会典型应用就可以<% page contentType"text/html;charsetUTF-8" language"java" %> <% taglib uri"…...

编程日记 2023/3/2 9:53:29

ffmpeg.dll丢失怎么办，有什么修复ffmpeg.dll的方法

如果你在运行某些音视频软件或游戏时遇到了“ffmpeg.dll丢失”的错误消息&#xff0c;这意味着你的Windows系统中缺少了ffmpeg.dll文件&#xff0c;这是一个必要的动态链接库&#xff08;DLL&#xff09;文件&#xff0c;用于支持许多音视频软件和游戏的运行。在这篇文章中&…...

编程日记 2023/3/2 9:52:20

【学习笔记】NOIP爆零赛9

这场考炸了&#xff0c;不过也还好&#xff0c;正好给自己警醒的作用 t1t1t1应该是想到正解了&#xff0c;就是最后边界那个地方还是没有想清楚&#xff0c;哎这种交互题卡询问次数还是挺难受的&#xff0c;并且似乎我对于这种细节并不能很好把握。然后就少了50pts50pts50pts是…...

编程日记 2023/3/2 9:51:14

SpringMVC的常用组件和工作流程及部分注解解析

一丶SpringMVC常用的组件 1.前端控制器DispatcherServlet 作用&#xff1a;统一处理请求和响应。除此之外还是整个流程控制的中心&#xff0c;由 DispatcherServlet 来调用其他组件&#xff0c;处理用户的请求 接收请求&#xff0c;响应结果&#xff0c;相当于转发器&#xff…...

编程日记 2023/3/2 9:48:58

创建Firebase项目并接入Firebase推送： Firebase Cloud Messaging (FCM)

1.FCM简介&#xff1a;Firebase Cloud Messaging (FCM) 是一种跨平台消息传递解决方案&#xff0c;可供您可靠地传递消息&#xff0c;而且还是免费的服务。支持 Android&#xff0c;IOS,Web,Flutter,Unity.消息类型可以使用 FCM 向客户端发送两种类型的消息&#xff1a;通知消息…...

编程日记 2023/3/2 9:47:49

MyBatis的简单使用

MyBatis是一个优秀的持久型框架用于简化JDBC开发&#xff0c;JDBC的原生写法普遍都很麻烦&#xff0c;还要写原汁原味的sql语句&#xff0c;mybatis将很多东西都放到了配置文件里面然后用少量代码简化了免除了几乎所有的JDBC代码以及设定参数和获取结果集的工作。MyBatis 可以通…...

编程日记 2023/3/2 9:46:44

最新的Windows docker安装方法

什么是Docker&#xff1f;关于Docker的相关概述&#xff0c;请看&#xff1a;Docker_面向架构编程的博客-CSDN博客在Windows10 or Windows11中安装docker主要就两步&#xff1a;1.安装wsl22. 安装docker一、安装WSL2安装wslwsl --install然后重启一下电脑在cmd窗口可以查看自己…...

编程日记 2023/3/2 9:45:39

2023软件测试工程师涨薪攻略，3年如何达到30K

1.软件测试如何实现涨薪 首先涨薪并不是从8000涨到9000这种涨薪&#xff0c;而是从8000涨到15K加到25K的涨薪。基本上三年之内就可以实现。 如果我们只是普通的有应届毕业生或者是普通本科那我们就只能从小公司开始慢慢往上走。 有些同学想去做测试&#xff0c;是希望能够日…...

编程日记 2023/3/2 9:44:32

【算法题】1927. 求和游戏

题目&#xff1a; Alice 和 Bob 玩一个游戏&#xff0c;两人轮流行动&#xff0c;Alice 先手 。 给你一个 偶数长度 的字符串 num &#xff0c;每一个字符为数字字符或者 ‘?’ 。每一次操作中&#xff0c;如果 num 中至少有一个 ‘?’ &#xff0c;那么玩家可以执行以下操…...

编程日记 2023/3/2 9:43:24

有趣的 Kotlin 0x10：操作符 ..＜

操作符 …< ..< 操作符是 Kotlin 在 1.7.20 版本中引入的不包含尾部元素的左闭右开区间操作符。之前我们使用的比较多的操作符可能是 .. 和 until&#xff0c;两者均表示区间&#xff0c;前者是闭区间&#xff0c;后者则表示不包含末端元素的左闭右开区间。 OptIn(Expe…...

编程日记 2023/3/2 9:41:10

mysql数据库之索引使用原则

一、最左前缀法则。 1、如果索引使用了多列&#xff08;联合索引&#xff09;&#xff0c;要遵守最左前缀法则。最左前缀法则指的是查询从索引的最左列开始&#xff0c;并且不跳过索引中的列。 如果跳跃到某一列&#xff0c;索引将部分失效&#xff08;后面的字段索引失效&am…...

编程日记 2023/3/2 9:40:05

【Java】Spring Boot 日志文件

文章目录SpringBoot日志文件1. 日志有什么用2. 日志怎么用3. 自定义日志打印3.1 在程序中得到日志对象3.2 使用日志对象打印日志4. 日志级别4.1 日志级别有什么用&#xff1f;4.2 日志级别的分类与使用5. 日志持久化6. 更简单的日志输出--lombok6.1 添加 lombok 依赖6.2 输出日…...

编程日记 2023/3/2 9:39:00

软件项目管理计算题复习（1）

软件项目管理计算题复习&#xff08;1&#xff09; 1.关键路径&#xff1a;决定项目最早完成的一系列的活动。网络图中最长的路&#xff0c;最少的时差&#xff0c;总是差为0&#xff0c;也是关键路径。 2.最短路径也是最短工期 3.总时差&#xff1a;最晚开始-最早开始最晚结…...

编程日记 2023/3/2 9:37:56

BMI160 BOSCH/博世 六轴 加速度 陀螺仪 传感器

BMI160 6轴惯性运动传感器&#xff0c;采用MEMS传感器封装&#xff0c;将16位3轴加速度计和超低功耗3轴陀螺仪集成在一起。当加速度计和陀螺仪在全速模式下运行时&#xff0c;耗电典型值低至950A&#xff0c;仅为市场上同类产品耗电量的50%或者更低。 Bosch BMI160专为智能手机…...

编程日记 2023/3/2 9:36:49

ROS探索[wpr_simulation的编译]

遇到的多种挑战最终的解决方式是通过重新删除所有编译文件夹重新生成工程原因如下 第一次生成的catkin_make文件的时候针对环境变量进行了设置，如果不删除环境变量相关的设置则后续新装的工具工程都会受到影响掣肘Protocbuf相关问题系统中存在多个版本的Protocbuf，因此优先级…...

编程日记 2023/3/2 9:35:43

连接Oracle数据库失败（ORA-12514）故障排除

文章目录症状产生原因解决办法欢迎加下方我的微信&#x1f447;&#xff0c;拉你入学习群点击试看博主的专著《MySQL 8.0运维与优化》&#xff08;清华大学出版社&#xff09;ORA-12514的故障是很多新手在连接Oracle数据库时经常遇到故障&#xff0c;它通常表示无法连接到数据库…...

编程日记 2023/3/2 9:34:25

DevOps 学习笔记（一） | DevOps 简介及环境搭建

1. 环境配置 本次实验需要三台服务器CI/CD 服务器、应用服务器和Harbor 服务器 DevOps 步骤 程序员将代码 push 到代码仓库Jenkins 根据触发条件拉取代码到CI/CD 服务器Jenkins 使用 Maven 将代码 build 成 jar 包Jenkins 使用 jar 包通过 Dockerfile 和 docker-compose.yml…...

编程日记 2023/3/2 9:33:12

日志收集笔记（Filebeat 日志收集、Logstash 日志过滤）

1 FileBeat Filebeat 是使用 Golang 实现的轻量型日志采集器&#xff0c;也是 Elasticsearch stack 里面的一员。本质上是一个 agent &#xff0c;可以安装在各个节点上&#xff0c;根据配置读取对应位置的日志&#xff0c;并上报到相应的地方去。 1.1 FileBeat 安装与使用 …...

编程日记 2023/3/2 9:31:59

字节二面，原来是我对自动化测试的理解太浅薄了..

如何使用Python实现自动化测试 如果你入职一家新的公司&#xff0c;领导让你开展自动化测试&#xff0c;作为一个新人&#xff0c;你肯定会手忙脚乱&#xff0c;你会如何落地自动化测试呢&#xff1f;资深测试架构师沉醉将告诉你如何落地自动kan化测试&#xff0c;本次话题主要…...

编程日记 2023/3/2 9:30:51

2023雅虎邮箱不能注册？别急，这份教程教你成功注册雅虎邮箱

这几年&#xff0c;跨境电商的迅猛发展&#xff0c;越来越多人加入这片蓝海&#xff0c;跨境人拥有一个专业的邮箱账户显得尤为重要&#xff0c;它是商业交流和日常工作的必备工具。因此&#xff0c;雅虎邮箱成为了许多人的首选&#xff0c;全球范围内使用雅虎邮箱的人数是非常…...

编程日记 2023/3/2 9:00:19

Elasticsearch 自动补全 completion type

Elasticsearch 自带一种自动补全类型 completion 这种类型不在mapping文档里面有点坑。 先直接上例子。 建立 index,把我们要自动补全的字段设置为 completion 类型 或者直接设置为子类型 PUT /blogs_completion/ {"mappings": {"tech": {"properties…...

编程日记 2023/3/2 8:59:05

GB28181协议实现源码Android源码

一、GB28181规范 尽管在国标GB28181中并没有对“平台”进行明确的定义，但在规范中却多次提到“系统平台”、“管理平台”等词汇，在具体项目中、网络上的交流学习中，平台概念也是无处不在。笔者认为，GB28181平台就是视频联网系统中的上级平台、中间平台或下级平台，用于实现…...

编程日记 2023/3/2 8:57:43

HNU工训中心： 三人表决器及八人抢答器实验报告

工训中心的牛马实验 三人表决器&#xff1a; 实验目的 1) 辨识数字IC功能说明。 2) 测试数字集成门电路&#xff0c;掌握输出故障排除、使用注意事项。 3) 掌握逻辑函数搭建三人表决器。 2.实验资源 HBE硬件基础电路实验箱、万用表 74LS00与非门、74LS10 三个3输入与非门…...

编程日记 2023/3/2 8:56:07

split()用法注意事项

split()用法注意事项 这个要注意有些特殊的分割符&#xff0c;比如.&#xff0c;这个表示匹配任何字符&#xff0c;如果在split()中调用的话&#xff0c;会将任何字符都分隔开&#xff0c;比如&#xff1a; String[] split "se.lll".split("."); System…...

编程日记 2023/3/2 8:54:57

centos7配置静态网络常见问题归纳

系列相似配置与安装软件问题整理与归纳文章目录 安装pymysql库_pymysql库安装_张小鱼༒的博客-CSDN博客 解决pip更新的代码_pip更新代码_张小鱼༒的博客-CSDN博客 python当中的第三方wxPython库的安装解答_pip install wx_张小鱼༒的博客-CSDN博客 spark里面配置jdk后的编程…...

编程日记 2023/3/2 8:53:40

产品经理修炼指南【01】

最近看了点产品经理的书&#xff0c;觉得产品经理这个位置和程序员不太一样&#xff0c;程序员唯一考核的标准就是能不能完成工作任务、是否能完成工作代码&#xff0c;但是产品经理貌似不一样&#xff0c;就像我给刘曼说的&#xff0c;产品经理上可以接领导&#xff0c;下可以…...

编程日记 2023/3/2 8:52:06

NCRE计算机等级考试Python真题（十一）

第十一套试题1、以下选项对于import保留字描述错误的是&#xff1a;A.import可以用于导入函数库或者库中的函数B.可以使用from jieba import lcut 引入 jieba库C.使用import jieba as jb&#xff0c;引入函数库jieba&#xff0c;取别名jbD.使用import jieba 引入jieba库正确答案…...

编程日记 2023/3/2 8:50:57

网站建设后台管理便捷/营销工具有哪些

[Unity中文课堂教程] C#中级编程 - 01 - 可读可写属性 原教程视频地址&#xff1a; 《[Unity中文课堂教程预告片] C#中级编程_哔哩哔哩_bilibili》 《C#中级编程 - Unity中文课堂 (u3d.cn)》 内容短小精悍简练&#xff0c;每节只有几分钟。很适合用来预习和复习。 主要代码内容…...

编程日记 2024/11/17 4:37:03

合肥制作企业网站/西地那非片能延时多久每次吃多少

在virtual的知识里摸爬滚打好几天&#xff0c;最近大脑有些不够用了&#xff0c;现在整理一下 非考虑内存对齐时各个结构的大致模型 至于考绿内存的在前面几张已经叙述过了&#xff0c;为了方便&#xff0c;我再纸上画了整体的流程&#xff0c;&#xff0c; 内存分配要注意对齐…...

编程日记 2024/11/17 4:05:37

软件开发工具包sdk/太原seo网站优化

首先看一下epoll的几个函数的介绍。1、epoll_create函数/*** brief 该函数生成一个epoll专用的文件描述符。它其实是在内核申请一空间&#xff0c;用来存* 放你想关注的socket fd上是否发生以及发生了什么事件。* param size: size就是你在这个epoll fd上能关注的最大socket fd…...

编程日记 2024/11/17 2:59:32

代做网站名称优化/成都网站建设软件

本文转载自&#xff1a;http://blog.csdn.net/leixiaohua1020/article/details/15811977 在CSDN上的这一段日子&#xff0c;接触到了很多同行业的人&#xff0c;尤其是使用FFMPEG进行视音频编解码的人&#xff0c;有的已经是有多年经验的“大神”&#xff0c;有的是刚开始学习的…...

编程日记 2024/11/17 2:37:14

沈阳学习做网站/女生学网络营销这个专业好吗

編按&#xff1a;1979年&#xff0c; 《哈佛商業評論》 刊出〈競爭作用 力如何形塑策略〉 &#xff08;How Competitive Forces Shape Strategy &#xff09;&#xff0c;這篇文章的作者是當時擔任副教授的年輕經 濟學家麥可&#xff0e;波特 &#xff08;Michael E. Porter &a…...

编程日记 2024/11/17 0:20:01

什么网站容易做流量/营销模式方案

Linux SCP和SSH命令平时做Oracle实验、经常会在多个主机间传数据或者登入、这两个命令经常用到这里以最简单的实例介绍一下、以免自己忘了㈠ SCP www.2cto.comscp是在两台机器间复制传输数据的命令、其实质相当于利用SSH协议来传输数据的cp命令复制远程服务器的文件到本地&am…...

编程日记 2024/11/16 23:13:27