VUE 基础(二)
1 v-show:根据表达值的真假，切换元素的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 三种表达方式 --><!-- 直接固定表达式的真假 --><img type="button" value="v-show" v-show="true"><!-- 将表达式的值放在data中 --><img src="xxx" v-show="isShow"> <!-- 也可以通过判断来确定真假 --><img src="xxx" v-show="age>=18"><input type="button" value="切换状态" @click="change"> </div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{isShow:"true",age: 16},methods: {change:function(){this.isShow=!this.isShow}},})</script>
</body>
</html>2 v-if:根据表达值的真假，切换元素的显示和隐藏(用法大致同v-show 不过多展示)
3 v-bind:设置元素的属性(比如src,title,class)
格式: v_bind:属性名=表达式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 两种表达方法 --><img src="xxx" ><img v-bind:src="imgSrc" ><!-- 存在一种简化写法 --><img :src="imgSrc"> //更常用<br><img :src="imgSrc" :title="imgTitle+'!'"> //可以字符串拼接</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{imgSrc:"xxx",imgTitle:"你好呀"},methods: {},})</script>
</body>
</html>4 v-for:根据数据生成列表结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><input type="button" value="添加数据" @click="add"><input type="button" value="减少数据" @click="remove"><ul><li v-for="item in arr">{{item}}</li><li v-for="item in vegetables">{{item.name}} </li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{arr:[1,2,3,4,5],vegetables:[{name:"西兰花炒蛋"},{name:"西红柿炒蛋"}]},methods: {add:function(){this.vegetables.push({name:"胡萝卜炒蛋"});},remove:function(){this.vegetables.shift();}},})</script>
</body>
</html>5 v-model:获取和设置表单元素的值(双向数据绑定) 通常用于文本内容
绑定后 无论是改变v-model中的值 还是data中的整体的数值都会发生相同的变化
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><input type="text" v-model="message"><!-- h2标签中的值也同步跟着变化 --><h2>{{message}} </h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:"你好"},methods: {},})</script>
</body>
</html>相关文章：
)
VUE 基础(二)
1 v-show:根据表达值的真假，切换元素的显示和隐藏 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">&l…...
VMware Cloud Foundation ESXi 主机
一、准备嵌套 ESXi 主机环境# 1）物理 ESXi 主机信息 本次准备用于部署 VCF 嵌套实验环境的物理宿主机的配置信息如下图所示。其实，部署 VCF 环境主要对内存的大小要求比较高，部署完整的管理域相关组件下来差不多就要占用 200 GB左右内存，而对 CPU 和存储的需求可以根据实…...
PyTorch深度学习快速入门（下）
PyTorch深度学习快速入门（下） 一、现有网络模型的使用及修改（一）背景知识（二）修改网络模型的三种方法 二、网络模型的保存与加载（一）保存网络模型的两种方法（二ÿ…...
轻松入门Linux—CentOS,直接拿捏 —/— ＜1＞
一、什么是Linux Linux是一个开源的操作系统，目前是市面上占有率极高的服务器操作系统，目前其分支有很多。是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多 CPU 的操作系统 Linux能运行主要的UNIX工具软件、应用程序和网络协议 Linux支持 32…...
pandas安装以及导入CSV
安装pandas pip install pandas速度慢可以切换国内镜像源 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas执行导入csv操作 import pandas as pd# 读取csv文件 data pd.read_csv(yourPath)输入data查看数据 导入成功！...
新能源车浪潮来袭，同时存在高压低压系统，如何准确进行高低压布线间距EMC分析？
摘要 随着车辆电气化水平的逐步提升，电气零部件布局和布线面临着前所未有的挑战，在不断的压缩电气零部件间间距后，EMC性能成为非常关键的性能指标。特别是对于新能源车型，同时存在高压和低压系统，高低压耦合若处理的不…...
QUIC 协议
详解 QUIC 协议：它为何比 TCP 更优越？...
【软件测试】--接口测试
1. 接口用例设计 接口测试的测试点 功能测试 单接口功能： 手工测试中的单个业务模块，一般对应一个接口 登陆业务 --> 登陆接口加入购物车业务 --> 加入购物车接口订单业务 --> 订单接口支付业务 --> 支付接口 借助工具、代码。绕开前端界面…...
【前端】上传视频，截取第一帧图片
使用input上传视频，获得视频的第一帧 参考：JavaScript获取视频的尺寸信息和第一帧图片 - 掘金 (juejin.cn) html： <inputbind:this{uploadRef}on:change{handleUpload}accept"video/*"type"file"/>视频类型校验&a…...
Redis-GEO数据结构的基本用法
GEO就是Geolocation的简写形式，代表地理坐标。Redis在3.2版本中加入了对GEO的支持，允许存储地理坐标信息，帮助我们根据经纬度来检索数据。常见的命令有： GEOADD：添加一个地理空间信息，包含：经度…...
【Linux C | 网络编程】进程池大文件传输的实现详解（三）
上一篇实现了进程池的小文件传输，使用自定义的协议，数据长度数据本身，类似小火车的形式，可以很好的解决TCP“粘包”的问题。 【Linux C | 网络编程】进程池小文件传输的实现详解（二） 当文件的内容大小少于…...
Mac如何通过SSH连接Github
目录 前言 一、实现步骤 1.生成 SSH 密钥对 2.添加 SSH 密钥到 GitHub： 3.配置 SSH 连接 1.更新远程仓库 URL 2.测试 SSH 连接 前言 GitHub 在 2021 年 8 月 13 日停止了对使用密码进行身份验证的支持。因此，你需要使用其他认证方式，如…...
成就巴西休闲游戏如何借助Google谷歌广告投放优势
在探讨巴西休闲游戏如何借助谷歌广告投放优势实现市场扩张的过程中，我们不得不深入分析巴西市场的独特属性、休闲游戏的兴起背景，以及谷歌广告平台在全球范围内的强大影响力。近年来，随着移动游戏市场的快速发展，特别是中轻度休闲…...
利用python检查磁盘空间使用情况
目录 一.前言 二.使用的库介绍 三.代码实现以及解析 3.1导入模块 3.2邮件发送函数 send_email 3.3检查磁盘空间函数 check_and_clean_disk 3.4主程序逻辑 四.致谢 一.前言 在信息技术飞速发展的今天，数据量的激增使得磁盘空间管理成为系统运维中的一项基…...
卷积神经网络（五）---图像增强的方法
前面的部分专注于卷积神经网络的层结构介绍，同时还介绍了到目前为止比较出名的卷积神经网络，接着使用比较复杂的卷积神经网络提高了 MNIST 数据集的准确率。下面将从另外的角度——图像增强的方面入手，提高模型的准确率和泛化能力。 一直以来…...
矩阵常见分解算法及其在SLAM中的应用
文章目录 常见特殊矩阵定义Cholesky分解（正定Hermittian矩阵，分解结果唯一）Cholesky分解应用 SVD分解（将singularvalues排序后分解唯一）SVD 分解的应用（任意矩阵） QR分解（任意矩阵&a…...
【排序】快速排序详解
✨✨欢迎大家来到Celia的博客✨✨ 🎉🎉创作不易，请点赞关注，多多支持哦🎉🎉 所属专栏：排序 个人主页：Celias blog~ 一、快速排序的思想 快速排序的核心思想是： 选定一个…...
贪心算法总结（2）
一、买卖股票的最佳时机 . - 力扣（LeetCode） class Solution { public:int maxProfit(vector<int>& prices) {int miniINT_MAX;int ret0;for(int&price:prices){//遍历的时候，我们随时去更新最小的值，然后让每一位…...
弘景光电：技术实力与创新驱动并进
在光学镜头及摄像模组产品领域，广东弘景光电科技股份有限公司（以下简称“弘景光电”）无疑是一颗耀眼的明星。自成立以来，弘景光电凭借其强大的研发实力、卓越的产品性能、精密的制造工艺以及严格的质量管理体系，在光学…...
2024年7月23日~2024年7月29日周报
目录 一、前言 二、完成情况 2.1 一种具有边缘增强特点的医学图像分割网络 2.2 融合边缘增强注意力机制和 U-Net 网络的医学图像分割 2.3 遇到的困难 三、下周计划 一、前言 上周参加了一些师兄师姐的论文讨论会议，并完成了初稿。 本周继续修改论文࿰…...
Wan2.2-I2V-A14B效果展示：支持语义分割引导的多对象独立运动控制
Wan2.2-I2V-A14B效果展示：支持语义分割引导的多对象独立运动控制 1. 惊艳的视频生成能力 Wan2.2-I2V-A14B模型带来了令人惊叹的视频生成效果，特别是其独特的语义分割引导和多对象独立运动控制能力。想象一下，你只需要用文字描述一个场景&am…...
SAP-ABAP：SAP ABAP 经典弹窗函数 POPUP_TO_CONFIRM 完全指南
SAP ABAP 经典弹窗函数 POPUP_TO_CONFIRM 完全指南在SAP开发中，如何优雅地让用户确认“你确定要删除这条数据吗？”——答案就是 POPUP_TO_CONFIRM。在 ABAP 开发的世界里，与用户的交互不仅仅是输入输出。很多时候，我们需要在程序执…...
Qwen3视觉黑板报辅助数据库课程设计：ER图与数据关系可视化
Qwen3视觉黑板报辅助数据库课程设计：ER图与数据关系可视化 你是不是也经历过这样的场景？面对《数据库课程设计》这门课，老师布置了一个“图书管理系统”或者“学生选课系统”的题目，你脑子里有一堆想法，但就是不知道该…...
Super Qwen Voice World效果展示：砖块跳动节拍与语音时长精准匹配
Super Qwen Voice World效果展示：砖块跳动节拍与语音时长精准匹配 1. 引言：当像素世界“开口说话” 想象一下，你正在玩一款复古的像素游戏。屏幕底部的砖块随着背景音乐有节奏地上下跳动，突然，一个充满活力的声音响起…...
大数据领域HBase的备份与恢复方案
大数据领域HBase的备份与恢复方案 关键词：HBase备份恢复、分布式存储、数据持久化、全量备份、增量备份、灾难恢复、快照机制 摘要：本文系统解析HBase分布式环境下的数据备份与恢复技术体系，涵盖核心存储原理、多维度备份策略（全量…...
学术论文利器：OpenClaw+Qwen3.5-9B自动生成LaTeX文档
学术论文利器：OpenClawQwen3.5-9B自动生成LaTeX文档 1. 为什么需要自动化论文写作工具 去年冬天，当我面对第五篇论文的修订时，突然意识到自己把80%的时间花在了重复劳动上：调整表格格式、重新绘制图表、校对参考文献编号。这种机…...
别再只跑Demo了！手把手教你用TensorFlow训练自己的谷物分类模型（11类数据集）
从零构建高精度谷物分类模型：TensorFlow实战指南 当你第一次接触深度学习时，可能已经运行过MNIST手写数字识别或CIFAR-10这样的标准Demo。但真正要解决实际问题时，这些玩具数据集远远不够。本文将带你用TensorFlow处理一个真实的11类谷物图像…...
被头条、站长论坛力荐！爱娃子博客：五年深耕，藏着普通人最动人的生活真相
在流量至上、内容同质化严重的当下，想找到一个不迎合热度、不堆砌噱头，却能让人反复品读、获得共鸣的博客，早已成为很多人的奢望。而今天要给大家推荐的爱娃子博客，正是这样一处被各大平台力荐的“心灵栖息地”——它不仅被今日头…...
OpenClaw环境迁移：gemma-3-12b-it配置备份与恢复指南
OpenClaw环境迁移：gemma-3-12b-it配置备份与恢复指南 1. 为什么需要环境迁移方案 上周我的主力开发机突然硬盘故障，导致所有数据丢失。最让我头疼的不是代码仓库——它们都有远程备份，而是那套精心调校的OpenClawgemma-3-12b-it环境。花了整…...
改进遗传算法求解分布式柔性作业车间调度问题 Matlab代码 考虑多工厂约束，以最小化最大完工...
改进遗传算法求解分布式柔性作业车间调度问题 Matlab代码 考虑多工厂约束，以最小化最大完工时间为目标函数，使用ipox、ux两种交叉方式，改进G-L-R初始化机制提升初始种群质量，使用变邻域搜索机制对空间进行局部搜索 更换关键工厂中…...