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代码展示

二 v-for循环指令

三 计算属性

四 侦听器


一 v-model表单元素

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

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

1.1 v-model绑定文本域的value

<!-- v-model绑定文本域的value ,如果有value会覆盖掉value属性--><!-- lazy属性:光标离开再发请求 --><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类型

<!-- number属性:如果能转成number就会转成numer类型,比如文本域中输入数字原本时string,但是加上这个属性就会转成number --><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属性:去文本域输入的前后空格

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

1.2v-model绑定单选checkbox

实现代码如下:

 <!-- v-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>

逻辑如下:

 

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

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

相关文章

esp8266+micropython+irsend红外发射调试记录

在网上搜索esp8266micropython的红外发射库&#xff0c;没找到&#xff0c;发现 接收库是有的&#xff0c;可以参考&#xff1a;基于MicroPython的ESP8266连接外设IO&#xff08;二&#xff09;_micropython 红外接收-CSDN博客 可惜没有发射&#xff0c;很不方便。 这里都有介…

PHP财务记账管理系统小程序源码

理财小能手必备&#xff01;揭秘财务记账管理系统的魔力✨ &#x1f31f; 引入篇&#xff1a;告别糊涂账&#xff0c;拥抱财务自由 你是否曾为月底的账单头疼不已&#xff1f;是否觉得自己的钱总是莫名其妙地消失&#xff1f;别担心&#xff0c;财务记账管理系统来拯救你的钱…

【机器学习】必会数学知识:一文掌握数据科学核心数学知识点(下),收藏~

核心数学知识点 1、引言2、数据科学必会数学知识2.13 K均值聚类2.14 决策树2.15 随机森林2.16 梯度下降2.17 随机梯度下降&#xff08;SGD&#xff09;2.18 卷积2.19 拉普拉斯变换2.20 傅里叶变换2.21 信息论2.22 时间序列分析2.23 生成模型与判别模型2.24 支持向量机&#xff…

git merge 分支回退

1. 使用git merge --abort&#xff08;如果合并正在进行中&#xff09; git merge --abort2. 使用git reset&#xff08;合并已经提交&#xff09; 硬重置&#xff08;--hard&#xff09;会丢弃所有合并后的更改&#xff0c;并将HEAD指向合并前的提交。这是最彻底的方式&…

DDOS 攻击原理

DDoS攻击的基本原理 资源耗尽&#xff1a;攻击者通过发送大量的请求或数据包&#xff0c;耗尽目标系统的资源&#xff08;如带宽、CPU、内存等&#xff09;&#xff0c;使其无法处理正常的用户请求。 分布式攻击&#xff1a;与传统的DoS&#xff08;拒绝服务&#xff09;攻击不…

Java-面向对象基础

在面向对象编程&#xff08;Object-Oriented Programming, OOP&#xff09;中&#xff0c;类&#xff08;Class&#xff09;是一种用来描述对象共同特征的蓝图或模板。它是创建对象的原型&#xff0c;定义了对象可以有的属性&#xff08;字段&#xff09;和行为&#xff08;方法…

物联网应用,了解一点 WWAN全球网络标准

WWAN/蜂窝无线电认证&#xff0c;对跨地区应用场景&#xff0c;特别重要。跟随全球业务的脚步&#xff0c;我们像大唐先辈一样走遍全球业务的时候&#xff0c;了解一点全球化的 知识信息&#xff0c;就显得有那么点意义。 NA &#xff08;北美&#xff09;&#xff1a;美国和加…

OpenSSH漏洞(CVE-2024-6387)

漏洞信息 请参考:OpenSSH远程代码执行漏洞 (CVE-2024-6387) 影响范围 8.5p1 <= OpenSSH < 9.8p1 参考链接中内容补充 利用方式 关于OpenSSH漏洞CVE-2024-6387,攻击者可以利用一个有用的代码路径并在正确的时间点上被SIGALRM信号打断,从而导致sshd(OpenSSH守护…

基于Python的哔哩哔哩数据分析系统设计实现过程,技术使用flask、MySQL、echarts,前端使用Layui

背景和意义 随着互联网和数字媒体行业的快速发展&#xff0c;视频网站作为重要的内容传播平台之一&#xff0c;用户量和内容丰富度呈现爆发式增长。本研究旨在设计并实现一种基于Python的哔哩哔哩数据分析系统&#xff0c;采用Flask框架、MySQL数据库以及echarts数据可视化技术…

工控、物联网、电力行业调试工具大全

工控、物联网、电力行业调试工具大全 文章目录 工控、物联网、电力行业调试工具大全Modbus调试工具MQTT调试工具IEC104/IEC101调试工具IEC61850 调试工具DL/T645 调试工具 Modbus调试工具 Modbus 是一种用于工业自动化系统中的通信协议&#xff0c;最早由 Modicon&#xff08;…

信号111

2、核心转储 当进程出现魔种异常的时候&#xff0c;是否有OS将当前进程在内存中的相关核心数据&#xff0c;转存到磁盘中&#xff01; 一般而言云服务器的核心转储功能是关闭的。 3、验证进程等待中的core dump标记位。 4、为什么生产环境一般都要关闭 core dump 系统调用接口…

解释器模式在金融业务中的应用及其在Spring框架中的实现

引言 解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为设计模式&#xff0c;它为特定语言定义了一个解释器&#xff0c;用于解释语言中的语句。该模式用于需要解释和执行特定语言或表达式的场景&#xff0c;例如脚本引擎、规则引擎等。在金融业务中&#xff…

NSObject‘s MetaClass 的 super_class 指向谁 ?

在 Objective-C 运行时系统中&#xff0c;NSObject 是所有类的根类。为了理解 NSObject 的元类&#xff08;MetaClass&#xff09;以及它的 super_class 指针指向谁&#xff0c;我们需要理解元类的继承关系。 类和元类的关系 每个类对象都有一个 isa 指针&#xff0c;指向其元…

46、lvs集群- 博客

1、lvs集群&#xff1a; lvs&#xff1a;linux virtual server----章文嵩发起的开源项目&#xff0c;阿里。linux的内核层面实现负载均衡的软件。 主要作用&#xff1a;将多个后端服务器组成一个高可用&#xff0c;高性能的服务器集群&#xff0c;通过负载均衡的算法将客户端的…

资讯类app怎么应对DDOS攻击

资讯类app怎么应对DDOS攻击&#xff1f;在数字化时代&#xff0c;资讯类App作为信息传播的重要载体&#xff0c;其稳定运行直接关系到用户的信任与满意度。日益猖獗的DDoS攻击成为了这类应用不可忽视的威胁。为了有效抵御这一挑战&#xff0c;业界涌现出了多种创新的防护方案&a…

基于cmake为项目自动获取git分支tag的版本号和commitid

目录 1. 引言2. 实现过程2.1 工程目录规划2.2 c程序文件2.3 CMakeLists.txt2.4 GitVersion.cmake文件2.5 BuildNumber.cmake文件1. 引言 在项目构建的时候,我们经常会希望能够将git提交的分支信息和提交号(commitid)以及当前版本发布的tag信息作为版本号自动构建到程序里面,以…

留学生的作业形式有哪些???

作业是在海外求学中不可避免的一部分&#xff0c;在国外留学&#xff0c;课程种类丰富多样&#xff0c;每一门课程都有其独特的学习要求和作业形式。课业压力很大&#xff0c;不仅要应对各项quiz&#xff0c;日常各类作业也丝毫不能松懈。无论是文学、艺术&#xff0c;还是理工…

【JavaScript脚本宇宙】实时协同编辑:JavaScript 库和框架全面解析

实时协同编辑&#xff1a;探秘JavaScript实时协同编辑利器## 前言 在当今互联网时代&#xff0c;实时协同编辑成为了许多应用程序的重要功能之一。无论是团队协作办公软件&#xff0c;还是在线教育平台&#xff0c;都需要实现多人同时编辑文档的功能。为了满足这一需求&#x…

自建搜索引擎-基于美丽云

Meilisearch 是一个搜索引擎&#xff0c;主程序完全开源&#xff0c;除了使用官方提供的美丽云服务&#xff08;收费&#xff09;进行对接之外&#xff0c;还可以通过自建搜索引擎来实现完全独立的搜索服务。 由于成本问题&#xff0c;本博客采用自建的方式&#xff0c;本文就…

通过git将文件push到github 远程仓库

1.先git clone 代码地址 git clone htttp://github.com/用户名/test.git 2. 添加文件 例如&#xff1a;touch 1.txt 3.将文件添加到暂存区 git add 1.txt 4.提交 git commit -m "commit 1.txt" 5.与远程仓库建立关联 git remote add 远程仓库名 远程仓库…