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

Vue基础--v-model/v-for/事件属性/侦听器

news 2025/9/16 9:18:22

一 v-model表单元素

1.1 v-model绑定文本域的value

1.1.1 lazy属性：光标离开再发请求

1.1.2 number属性：如果能转成number就会转成numer类型

1.1.3 trim属性：去文本域输入的前后空格

1.2v-model绑定单选checkbox

1.3代码展示

二 v-for循环指令

三计算属性

四侦听器

一 v-model表单元素

v-model其实我自己就是单纯的把他理解成双向绑定指令。

和v-bind一样都是操作数据，只是这个一般用在表单中。

1.1 v-model绑定文本域的value
<input type="text" placeholder="请输入用户名" v-model.lazy="username" value="默认值"/><h2>{{username}}</h2>
我们用v-model绑定username，当我们在文本框中输入值后，对应的username也会进行数据的双向绑定，从而展示在页面上，效果如下:

1.1.1 lazy属性：光标离开再发请求

如上面所示，给v-model加上lazy属性，可以实现光标离开后再执行。

1.1.2 number属性：如果能转成number就会转成numer类型
<input type="text" name="age" v-model.number="age"><button @click="change()">获取age类型</button><h2>age的类型:{{type}}</h2>
正常来说，type=“text”的文本域就算输入的数字，也是string类型，而是由这个.number属性，就可以把数字转成number类型，方便进行运算需求。

1.1.3 trim属性：去文本域输入的前后空格
    <input type="text" v-model.trim="username">

1.2v-model绑定单选checkbox

实现代码如下：
 <input type="radio" name ="sex" v-model="sex" value="男">男<input type="radio" name ="sex" v-model="sex" value="女">女<h2>{{sex}}</h2>
具体逻辑如下：

效果展示：

1.3代码展示

完整代码以及注释如下:

<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>
</head>
<body><div id="app"><!-- v-model绑定文本域的value ,如果有value会覆盖掉value属性--><!-- lazy属性：光标离开再发请求 --><input type="text" placeholder="请输入用户名" v-model.lazy="username" value="默认值"/><h2>{{username}}</h2><!-- number属性：如果能转成number就会转成numer类型，比如文本域中输入数字原本时string，但是加上这个属性就会转成number --><input type="text" name="age" v-model.number="age"><button @click="change()">获取age类型</button><h2>age的类型:{{type}}</h2><!-- trim属性：去文本域输入的前后空格 --><input type="text" v-model.trim="username"><!-- v-model绑定单选checkbox --><input type="radio" name ="sex" v-model="sex" value="男">男<input type="radio" name ="sex" v-model="sex" value="女">女<h2>{{sex}}</h2><!-- v-mode绑定下拉框 --><select name="city" v-model="city"><option value="cs">长沙</option><option value="bj">北京</option><option value="sh">上海</option></select><h2>{{city}}</h2></div><script type="text/javascript" src="../vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata: function() {return {username:""  , sex:"女" , city:"sh",age:18,type:""}},methods:{change(){this.type = typeof this.age}}})// 2.挂载appapp.mount("#app")</script>
</body>
</html>

效果图如下:

二 v-for循环指令

一般用在表格展示数据的时候。

直接展示表格循环获取数据的代码：

还有可以直接获得数组的下标index：

完整代码展示:

<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>
</head>
<body><div id="app"><h2>列表展示</h2><ul><!-- 从数组arr中取出值name --><li v-for = "name in arr">{{name}}</li></ul><ul><!-- 从数组arr中取出值name和对应的小标index --><li v-for = "(name,index) in arr">{{index}}--{{name}}</li></ul><h2>学生信息展示</h2><table><tr><th>编号</th><th>姓名</th><th>年龄</th></tr><!-- 遍历对象数组 --><tr v-for = "stu in student"> <th>{{stu.id}}</th><th>{{stu.name}}</th><th>{{stu.age}}</th></tr></table><h2>嵌套For循环</h2><table><tr><th>编号</th><th>姓名</th><th>年龄</th><th>女朋友</th></tr><!-- 遍历对象数组 --><tr v-for = "stu in student"> <th>{{stu.id}}</th><th>{{stu.name}}</th><th>{{stu.age}}</th></tr></table></div><script type="text/javascript" src="../vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata: function() {return {arr:["张三"  , "李四"  , "王五"]   , student:[{id:1,name:"张三",age:13,girfriends:[{name:"小美",age:12},{name:"小芳",age:11}]},{id:2,name:"李四",age:15,girfriends:[{name:"小王",age:99},{name : "小玉",age:23}]}]}},})// 2.挂载appapp.mount("#app")</script>
</body>
</html>

效果展示：

三计算属性

说的明白一点，就是用来监听数据的。

这个函数里面有一个get函数，当需要获得get函数里面的属性的时候，就会自动调用这个get函数从而获取数据。

<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>
</head>
<body><style>input{width: 50px;}</style><div id="app"><input type="number" v-model="number1" >+<input type="number" v-model="number2" >={{sum}}<br><input type="number" v-model="number3" @mouseout="sum">+<input type="number" v-model="number4" @mouseout="sum">={{sum}}</div><script type="text/javascript" src="../vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata: function() {return {number1:0,number2:0,result:0}},methods:{// sum(){//     this.result = this.number1+this.number2// }},methods:{sum:function(){return parseInt(this.number1) + parseInt(this.number2);}},// 计算属性computed:{sum:{get(){  //get方法, 当有人读取计算属性时,该计算属性的get()函数就会执行return parseInt(this.number1) + parseInt(this.number2); //此时的this就是vm}}}})// 2.挂载appapp.mount("#app")</script>
</body>
</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>
</head>
<body><div id="app"><table border="1" ><tr><th></th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></tr><tr v-for="(book ,  index) in arr"><th>{{index+1}}</th><th>{{book.name}}</th><th>{{book.day}}</th><th>{{book.price}}</th><th><button @click="subNumber(book.id) ">-</button>{{book.number}}<button @click="addNumber(book.id)">+</button></th><th><button @click="del(index)">移除</button></th></tr></table><h2>总价：{{sum()}}</h2></div><script type="text/javascript" src="../../vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata: function() {return {total:0,nnumber:1,arr:[{id:1,name:"挪威的森林",day:"2024.10.23",price:102,number:1,},{id:2,name:"活着",day:"2024.10.11",price:66,number:1,}]}},methods:{sum(){if(this.total===0){this.arr.forEach(element => {this.total+=(element.price*element.number)});}else{return this.total}    },//    updateCount() {  //      alert(88)//     }  ,del(id){this.arr.splice(id,1)},subNumber(id){this.total+=10this.arr.forEach(element => {if(element.id===id){if(element.number>0){this.nnumber--element.number--;}}});},addNumber(id){this.arr.forEach(element => {if(element.id===id){this.nnumber++element.number++}});}},// 使用onMounted来在页面加载完成后调用updateCount  
// onMounted:(() => {  
//   updateCount();  
// }),watch: {  arr: {  handler(newValue, oldValue) {  this.total=0this.arr.forEach(element => {this.total += (element.number*element.price)}); },  deep: true // 开启深度侦听  }  }, })// 2.挂载appapp.mount("#app")</script>
</body>
</html>

逻辑如下：

Vue基础--v-model/v-for/事件属性/侦听器

目录一 v-model表单元素 1.1 v-model绑定文本域的value 1.1.1 lazy属性：光标离开再发请求 1.1.2 number属性：如果能转成number就会转成numer类型 1.1.3 trim属性：去文本域输入的前后空格 1.2v-model绑定单选checkbox 1.3代码展示二 …...

编程日记 2024/7/10 9:12:07

『大模型笔记』GraphRAG：用于复杂数据发现的新工具现已在GitHub上发布

GraphRAG：用于复杂数据发现的新工具现已在GitHub上发布文章目录一. GraphRAG：用于复杂数据发现的新工具现已在GitHub上发布1. 评估和结果2. 研究见解和未来方向二. 参考文献一. GraphRAG：用于复杂数据发现的新工具现已在GitHub上发布下载 GraphRAG今年早些时候，我们介绍…...

编程日记 2024/7/10 9:10:05

LabVIEW机器视觉技术在产品质量检测中有哪些应用实例

LabVIEW的机器视觉技术在产品质量检测中有广泛的应用，通过图像采集、处理和分析，实现对产品缺陷的自动检测、尺寸测量和定位校准，提高生产效率和产品质量。 1. 电子元器件质量检测在电子制造业中，电子元器件的质量检测是确保产品…...

编程日记 2024/7/10 9:06:00

【Linux】多线程_2

文章目录九、多线程2. 线程的控制未完待续九、多线程 2. 线程的控制主线程退出等同于进程退出等同于所有线程都退出。为了避免主线程退出，但是新线程并没有执行完自己的任务的问题，主线程同样要跟进程一样等待新线程返回。 pthread_join 函数…...

编程日记 2024/7/10 9:04:58

58、基于径向基神经网络的曲线拟合(matlab)

1、基于径向基神经网络的曲线拟合简介及原理 1）原理简介基于径向基神经网络（Radial Basis Function Neural Network, RBFNN）的曲线拟合是一种常用的非线性拟合方法，通过在输入空间中使用径向基函数对数据进行处理，实…...

编程日记 2024/7/10 9:03:57

3.上传图片（阿里云空间，oss验证）

笔记 20240710 未验证，现在还没有阿里云空间，等买个sit环境就可以验证一下。前端页面  <el-form-item label"优惠券图片" prop"couponImg"><single-upload v-model"dataForm.couponImg"&g…...

编程日记 2024/7/10 9:02:56

仪表板展示｜DataEase看中国：2023年中国新能源汽车经济运行情况分析

背景介绍随着政府机构、企业和个人对环保和可持续发展的高度关注，“新能源汽车”在全球范围内成为了一个热门话题。新能源汽车是指使用非传统燃料（如电能、氢能等）作为动力源的汽车。在中国市场，新能源汽车产业蓬勃发展&#…...

编程日记 2024/7/10 9:01:55

“Numpy数据分析与挖掘：高效学习重点技能“

目录 # 开篇 # 补充 zeros & ones eye 1. numpy数组的创建 1.1 array 1.2 range 1.3 arange 1.4 常见的数据类型 1.5 astype 1.6 random.random() & round 2. numpy数组计算和数组计算 2.1 reshape 2.2 shape 2.3 将一维数组变成多维数组 2.4 指定一维…...

编程日记 2024/7/10 9:00:54

百川工作手机实现销售管理微信监控系统

在瞬息万变的商业战场中，每一分效率的提升都是企业制胜的关键。传统销售管理模式已难以满足现代企业对精准、高效、合规的迫切需求。今天，让我们一同探索如何利用工作手机这一创新工具，为您的销售团队装上智能翅膀，开启销售管理的…...

编程日记 2024/7/10 8:59:52

RAG 工业落地方案框架（Qanything、RAGFlow、FastGPT、智谱RAG）细节比对！CVPR自动驾驶最in挑战赛赛道，全球冠军被算力选手夺走了

RAG 工业落地方案框架（Qanything、RAGFlow、FastGPT、智谱RAG）细节比对！CVPR自动驾驶最in挑战赛赛道，全球冠军被算力选手夺走了。本文详细比较了四种 RAG 工业落地方案 ——Qanything、RAGFlow、FastGPT 和智谱 RAG，重…...

编程日记 2024/7/10 8:57:50

华为防火墙拓扑搭建1

拓扑图要求 1.DMZ区内的服务器，生产区仅能在办公时间内（9：00-18：00）可以访问，办公区设备全天可以访问配置安全策略设置办公时间 2.生产区不允许访问互联网，办公区和游客区允许访问互联网…...

编程日记 2024/7/10 8:53:45

Linux 利用命名空间创建一个自己的“容器“

Linux 利用命名空间创建一个自己的"容器" 前置条件创建一个目录存放容器mkdir /myapp准备静态编译busybox，操作系统自带的往往是依赖动态库的(本文使用的debian apt install busybox-static) 开始使用unshare起一个独立命名空间.# 进入后/myapp目录…...

编程日记 2024/7/10 8:52:44

RAG的学习与实践——LangChain和LlamaIndex学习笔记

RAG RAG(Retrieval Augmented Generation)系统，代表“检索增强生成”。RAG由五个关键步骤组成： 加载：这是指将数据从其所在位置（无论是文本文件、PDF、其他网站、数据库还是 API）获取到您的管道中。LlamaHub提供数百…...

编程日记 2024/7/10 8:51:43

Python爬虫原理以及3个小案例（源码）

一、爬虫原理网络爬虫是一种用于自动获取网页内容的程序。它模拟用户浏览网页的过程，通过发送HTTP请求获取网页的源代码，并利用解析和提取技术来获取所需的数据。 1. HTTP请求与响应过程爬虫向目标网站发送HTTP请求，请求包含URL、请求方…...

编程日记 2024/7/10 8:50:42

Vagrant配合VirtualBox搭建虚拟机

目录前言一、软件下载及安装1.下载2.安装扩展： 二、创建一个虚拟机1.Vagrant官方镜像仓库三、使用远程工具连接虚拟机1.修改相关配置文件四、虚拟机克隆及使用1.通用配置2.简单搭建一个java环境3.克隆虚拟机1.重命名虚拟机（可选）2.打包指定…...

编程日记 2024/7/10 8:49:41

Elasticsearch 建议（Suggesters）：实现自动补全和拼写检查

引言在现代搜索引擎中，自动补全和拼写检查功能已成为提升用户体验的重要工具。Elasticsearch，作为一款强大的分布式搜索和分析引擎，提供了多种Suggesters API来帮助开发者实现这些功能。本文将详细介绍Elasticsearch中的四种主要Suggester—…...

编程日记 2024/7/10 8:47:38

部署过docker后，防火墙firewall与iptables的基本指令

一、iptables【无需stop docker服务】如果服务器中部署了docker，优先选用iptables 1. 记录关闭docker中运行的mongoDB的27017端口： 由于docker与iptables存在配置规则，因此要修改docker相关端口的可访问性时需要使用下面的语句&#xff1a…...

编程日记 2024/7/10 8:46:37

华为 RIP 协议中 RIP 兼容版本、RIPv1、RIPv2 在收发 RIP 报文时的区别

RIP (Routing Information Protocol，路由信息协议） RIP 是一个比较早期的协议，在实际部署中较少使用，但RIP 协议的机制是所有矢量跻由协议的基础，因此，掌握 RIP 协议的工作原理对研究矢量路由协议有重要的…...

编程日记 2024/7/10 8:44:35

深度学习pytorch多机多卡网络配置桥接方法

1 安装pdsh（Parallel Distributed Shell） sudo apt install pdsh sudo -s # 切换超级用户身份 …...

编程日记 2024/7/10 8:43:34

服务器信息获取工具

功能介绍 SSH连接到远程服务器： 用户可以输入目标服务器的IP地址、用户名、密码以及SSH端口（默认22）。工具会尝试连接到远程服务器，并在连接失败时显示错误信息。运行命令并返回输出： 工具可以在远程服务器上运…...

编程日记 2024/7/10 8:42:33

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分）《Learning Humanoid Standing-up Control across Diverse Postures》系列文章：论文深度解读 + 算法与代码分析（二）作者机构：上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学论文主题：人形机器人…...

编程新知 2025/8/4 18:55:37

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...

编程新知 2025/9/6 15:39:02

经典的基于策略迭代和值迭代法的动态规划matlab代码，实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/8/3 2:20:04

Python ROS2【机器人中间件框架】简介

销量过万TEEIS德国护膝夏天用薄款优惠券冠生园百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

CSS | transition 和 transform的用处和区别

省流总结： transform用于变换/变形，transition是动画控制器 transform 用来对元素进行变形，常见的操作如下，它是立即生效的样式变形属性。旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/7/11 23:09:41

C# 表达式和运算符(求值顺序)

求值顺序表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生变化。例如，已知表达式3*52，依照子表达式的求值顺序，有两种可能的结果，如图9-3所示。如果乘法先执行，结果是17。如果5…...

编程新知 2025/9/15 23:02:52

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型，它将权限分配给角色，再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

编程新知 2025/9/9 10:06:55