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

VUE 基础(二)

news 2025/7/4 19:45:55

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:根据表达值的真假&#xff0c;切换元素的显示和隐藏 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">&l…...

编程日记 2024/7/30 20:21:35

VMware Cloud Foundation ESXi 主机

一、准备嵌套 ESXi 主机环境# 1）物理 ESXi 主机信息 本次准备用于部署 VCF 嵌套实验环境的物理宿主机的配置信息如下图所示。其实，部署 VCF 环境主要对内存的大小要求比较高，部署完整的管理域相关组件下来差不多就要占用 200 GB左右内存，而对 CPU 和存储的需求可以根据实…...

编程日记 2024/7/30 20:19:33

PyTorch深度学习快速入门（下）

PyTorch深度学习快速入门&#xff08;下&#xff09; 一、现有网络模型的使用及修改&#xff08;一&#xff09;背景知识&#xff08;二&#xff09;修改网络模型的三种方法 二、网络模型的保存与加载&#xff08;一&#xff09;保存网络模型的两种方法&#xff08;二&#xff…...

编程日记 2024/7/30 20:18:32

轻松入门Linux—CentOS,直接拿捏 —/— ＜1＞

一、什么是Linux Linux是一个开源的操作系统&#xff0c;目前是市面上占有率极高的服务器操作系统&#xff0c;目前其分支有很多。是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多 CPU 的操作系统 Linux能运行主要的UNIX工具软件、应用程序和网络协议 Linux支持 32…...

编程日记 2024/7/30 20:14:28

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查看数据 导入成功&#xff01;...

编程日记 2024/7/30 20:10:24

新能源车浪潮来袭，同时存在高压低压系统，如何准确进行高低压布线间距EMC分析？

摘要 随着车辆电气化水平的逐步提升&#xff0c;电气零部件布局和布线面临着前所未有的挑战&#xff0c;在不断的压缩电气零部件间间距后&#xff0c;EMC性能成为非常关键的性能指标。特别是对于新能源车型&#xff0c;同时存在高压和低压系统&#xff0c;高低压耦合若处理的不…...

编程日记 2024/7/30 20:09:22

QUIC 协议

详解 QUIC 协议&#xff1a;它为何比 TCP 更优越&#xff1f;...

编程日记 2024/7/30 20:08:21

【软件测试】--接口测试

1. 接口用例设计 接口测试的测试点 功能测试 单接口功能&#xff1a; 手工测试中的单个业务模块&#xff0c;一般对应一个接口 登陆业务 --> 登陆接口加入购物车业务 --> 加入购物车接口订单业务 --> 订单接口支付业务 --> 支付接口 借助工具、代码。绕开前端界面…...

编程日记 2024/7/30 20:07:20

【前端】上传视频，截取第一帧图片

使用input上传视频&#xff0c;获得视频的第一帧 参考&#xff1a;JavaScript获取视频的尺寸信息和第一帧图片 - 掘金 (juejin.cn) html&#xff1a; <inputbind:this{uploadRef}on:change{handleUpload}accept"video/*"type"file"/>视频类型校验&a…...

编程日记 2024/7/30 20:06:19

Redis-GEO数据结构的基本用法

GEO就是Geolocation的简写形式&#xff0c;代表地理坐标。Redis在3.2版本中加入了对GEO的支持&#xff0c;允许存储地理坐标信息&#xff0c;帮助我们根据经纬度来检索数据。常见的命令有&#xff1a; GEOADD&#xff1a;添加一个地理空间信息&#xff0c;包含&#xff1a;经度…...

编程日记 2024/7/30 20:03:16

【Linux C | 网络编程】进程池大文件传输的实现详解（三）

上一篇实现了进程池的小文件传输&#xff0c;使用自定义的协议&#xff0c;数据长度数据本身&#xff0c;类似小火车的形式&#xff0c;可以很好的解决TCP“粘包”的问题。 【Linux C | 网络编程】进程池小文件传输的实现详解&#xff08;二&#xff09; 当文件的内容大小少于…...

编程日记 2024/7/30 20:01:13

Mac如何通过SSH连接Github

目录 前言 一、实现步骤 1.生成 SSH 密钥对 2.添加 SSH 密钥到 GitHub&#xff1a; 3.配置 SSH 连接 1.更新远程仓库 URL 2.测试 SSH 连接 前言 GitHub 在 2021 年 8 月 13 日停止了对使用密码进行身份验证的支持。因此&#xff0c;你需要使用其他认证方式&#xff0c;如…...

编程日记 2024/7/30 20:00:12

成就巴西休闲游戏如何借助Google谷歌广告投放优势

在探讨巴西休闲游戏如何借助谷歌广告投放优势实现市场扩张的过程中&#xff0c;我们不得不深入分析巴西市场的独特属性、休闲游戏的兴起背景&#xff0c;以及谷歌广告平台在全球范围内的强大影响力。近年来&#xff0c;随着移动游戏市场的快速发展&#xff0c;特别是中轻度休闲…...

编程日记 2024/7/30 19:58:10

利用python检查磁盘空间使用情况

目录 一.前言 二.使用的库介绍 三.代码实现以及解析 3.1导入模块 3.2邮件发送函数 send_email 3.3检查磁盘空间函数 check_and_clean_disk 3.4主程序逻辑 四.致谢 一.前言 在信息技术飞速发展的今天&#xff0c;数据量的激增使得磁盘空间管理成为系统运维中的一项基…...

编程日记 2024/7/30 19:57:08

卷积神经网络（五）---图像增强的方法

前面的部分专注于卷积神经网络的层结构介绍&#xff0c;同时还介绍了到目前为止比较出名的卷积神经网络&#xff0c;接着使用比较复杂的卷积神经网络提高了 MNIST 数据集的准确率。下面将从另外的角度——图像增强的方面入手&#xff0c;提高模型的准确率和泛化能力。 一直以来…...

编程日记 2024/7/30 19:56:07

矩阵常见分解算法及其在SLAM中的应用

文章目录 常见特殊矩阵定义Cholesky分解&#xff08;正定Hermittian矩阵&#xff0c;分解结果唯一&#xff09;Cholesky分解应用 SVD分解&#xff08;将singularvalues排序后分解唯一&#xff09;SVD 分解的应用&#xff08;任意矩阵&#xff09; QR分解&#xff08;任意矩阵&a…...

编程日记 2024/7/30 19:55:06

【排序】快速排序详解

✨✨欢迎大家来到Celia的博客✨✨ &#x1f389;&#x1f389;创作不易&#xff0c;请点赞关注&#xff0c;多多支持哦&#x1f389;&#x1f389; 所属专栏&#xff1a;排序 个人主页&#xff1a;Celias blog~ 一、快速排序的思想 快速排序的核心思想是&#xff1a; 选定一个…...

编程日记 2024/7/30 19:51:02

贪心算法总结（2）

一、买卖股票的最佳时机 . - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int maxProfit(vector<int>& prices) {int miniINT_MAX;int ret0;for(int&price:prices){//遍历的时候&#xff0c;我们随时去更新最小的值&#xff0c;然后让每一位…...

编程日记 2024/7/30 19:50:01

弘景光电：技术实力与创新驱动并进

在光学镜头及摄像模组产品领域&#xff0c;广东弘景光电科技股份有限公司&#xff08;以下简称“弘景光电”&#xff09;无疑是一颗耀眼的明星。自成立以来&#xff0c;弘景光电凭借其强大的研发实力、卓越的产品性能、精密的制造工艺以及严格的质量管理体系&#xff0c;在光学…...

编程日记 2024/7/30 19:46:58

2024年7月23日~2024年7月29日周报

目录 一、前言 二、完成情况 2.1 一种具有边缘增强特点的医学图像分割网络 2.2 融合边缘增强注意力机制和 U-Net 网络的医学图像分割 2.3 遇到的困难 三、下周计划 一、前言 上周参加了一些师兄师姐的论文讨论会议&#xff0c;并完成了初稿。 本周继续修改论文&#xff0…...

编程日记 2024/7/30 19:45:57

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/7/1 4:37:59

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/7/2 9:08:42

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/6/28 11:42:05

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/7/2 17:00:57

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/7/4 1:48:25

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/7/1 21:06:50

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/6/23 6:42:53

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/3 22:46:36

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/6/19 14:18:18