[vue学习笔记]数组+事件+v-model的使用

news2024/11/25 10:30:33

1.关于数组的使用以及常见的函数

(1)在队尾操作函数:push():追加,pop():删除

arr.push(9,8,7,6);
这种批量追加的方式也是被允许的

(2)在队首操作的函数:shift():首位删除,unshift:首位增加

(3)splice(),参数可以分成三个部分

//第一个参数代表操作的位置
//第二个参数代表要删除的元素的数目,如果没有代表从头删到尾
//第三个元素代表要添加在这里的元素,可以一次添加多个
{1,2,3,4,5}
splice(1);---->{1}
splice(1,2,1,1)---->{1,1,1,4,5}
splice{1,0,1,1}--->{1,1,1,2,3,4,5}

(4)sort进行从高到低的排序,reverse为扭转按钮

2.关于事件的定义和一些事件修饰符的用法

(1)事件是什么

事件就是我们的一些操作,比如点击(click) 按键(keyup),我们经常使用v-on为事件绑定一个js行为

v-on:click="触发";

(2)事件修饰符

这里主要先解释文档里面的四种

.stop     //阻止冒泡行为
.prevent  //阻止默认行为
.once     //让这个事件只能被触发一次

这里慢慢举例,首先是关于stop的用法解释:

比如这样的代码

 在前端呈现的效果就是

肥肠简单,但是我们点击以后会碰到的效果就是,先执行one这个点击事件绑定的函数,再次执行two这个事件绑定的函数,相当于你点一次,父子元素都懂了,因为子元素在父元素的内部,所以点击子元素会不可避免地点击到父元素

如果只想执行子元素,这种情况下就可以添加这样的修饰符

这样效果就是点击只触发子元素,不会继续往上冒泡传递

后续的一些修饰符

<form @submit.prevent></form>
//在触发递交的时候阻止默认行为,比如说这里默认防止刷新界面

<button @click.once="xx"></button>
//第一次点击可以触发函数,但是第二次就不能点击了

 后续有机会会不上关于self之类的修饰符


此外,还有另一类修饰符更加直观,可以和click,keyup连用

常用的键盘符号:.shift   .enter  .tab........

@click.enter=""
//按住空格点击才能生效
@keyup.enter=""
//按一下空格生效

与之类似的还有鼠标修饰符,常与click连用,比如 .middle .left .right

@click.left=""
鼠标左键触发

3.关于双向数据绑定的原理和用法

双向数据绑定指令

v-model='msg'

会把当前表单里面的内容(一般是value)和vue数据里面的msg双向绑定,修改其中一个,另一个也发生改变,但是这玩意本质上是一个ts,其实是两个步骤合二为一了

//演示一下双向数据绑定的原理,以及补充一下这里的东西
  <input @input="(event)=>{this.msg=event.target.value;}" :value="msg">{{msg}}

关于v-model,常见的用法如下

表单常用的一些属性如下
  输入框
  <input v-model="a">{{a}}
  
  文本框
  <textarea v-model="a"></textarea>
  
  单选框
  我最喜欢吃:{{b}}
  <input type="radio" v-model="b" value="茄子"/>茄子
  <input type="radio" v-model="b" value="木瓜"/>木瓜
  <input type="radio" v-model="b" value="土豆"/>土豆
  
  复选框
  {{c}}
  <input type="checkbox" v-model="c" value="苹果">
  <input type="checkbox" v-model="c" value="香蕉">
  
  下拉选择框{{e}}
  <select v-model="e">
    <option value="12">12</option>
    <option value="13">13</option>
  </select>

注:有时候用上了v-model,就不需要name属性了

3.关于v-model的三种修饰符,比较简单

 其中lazy可能最常用一点,代表的是不会时时刻刻双向绑定,而是在输入的这个动作结束的时候才进行改变,也许会节省一点资源

trim清理输入文字前后的空格

number把输入转化为数字

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

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

相关文章

Gem5模拟器,关于Adding parameters to SimObjects and more events的一些问题记录(六)

目录 &#xff08;1&#xff09;为什么Gem是Python和C混合使用编程&#xff1f; &#xff08;2&#xff09;关于析构函数 创建类的时候一般都需要写上析构函数吗&#xff1f; &#xff08;3&#xff09;关于HelloObject和GoodbyeObject的先后后创建关系 &#xff08;1&…

C# 类 字段 方法

一 现实中的实物抽象为类 类(class)最基本的要素是 ① 字段(field):变量&#xff1b; ② 方法(method):函数&#xff1b; class Person {public string name;public int age;public void SayHello(){Console.WriteLine("Hello!My name is"name);}public string Ge…

(Python)第2章-12 输出三角形面积和周长 (15 分)

Python解决输入三条边输出面积与周长1.问题2.解决思路代码在孤单的日子里&#xff0c;你单枪匹马奋斗的样子酷毙了。江客&#xff1a;时荒![在这里插入图片描述](https://img-blog.csdnimg.cn/85fc4495dcfc4578a8612a432d8045cd.png#pic_center)1.问题 本题要求编写程序&#…

Arduino Uno零基础入门学习笔记——变量与函数

文章目录一、创建变量二、函数三、delay的例子总结一、创建变量 int currentTemperature;整数型变量 变量名字 分号 使用驼峰命名法对进行命名 有些程序员喜欢全部小写&#xff0c;有些程序员喜欢用下划线&#xff0c;所以如果要写一个my name的变量&#xff0c;他们常用的写…

vue3中的propemit

状态是什么&#xff1a; 页面中要显示的东西&#xff0c;放在一个变量中&#xff0c;每次更改完值&#xff0c;就会被拦截&#xff0c;同时再重新渲染页面&#xff1b; 状态的对立面就是属性&#xff1b; 可以没有状态&#xff0c;那只能用父组件传过来的属性来自己用&#…

Saga 模式

Saga 模式目录概述需求&#xff1a;设计思路实现思路分析1.2.适用场景&#xff1a;3.缺点&#xff1a;4.Saga的实现&#xff1a;参考资料和推荐阅读Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,ma…

mysql数据恢复,mysql数据备份,详细聊聊mysql数据备份与恢复

文章目录写在前面数据备份与恢复1、全量备份模拟全量备份与恢复全量备份的缺点2、增量备份模拟增量备份与恢复增量备份注意事项总结写在前面 作为互联网开发人员来说&#xff0c;数据安全性一直排在第一位的重中之重。 mysql作为关系型数据库的一个巨头&#xff0c;其备份与恢…

从GNU/Linux看国产操作系统的安全可控性

作者&#xff1a;IT圈黎俊杰 在信创的春风下&#xff0c;做为IT基础软件三驾马车之一的操作系统&#xff0c;自然是国产化替代的重点&#xff0c;再加上一直以来被大家当成”免费RedHat Enterprise Linux“的CentOS因被redhat收购&#xff0c;并宣布于2021年12月31日起在停止维…

SpringBoot+SpringCloud微服务搭建全过程(一)

一&#xff1a;什么是SpringBoot 1. SpringBoot不是一个全新的框架,而是对Spring框架的一个封装。所以&#xff0c;以前Spring可以做的事情&#xff0c;现在用SpringBoot都可以做。 2. SpringBoot整合了很多优秀的框架&#xff0c;用来简化Spring应用搭建和开发过程&#xff…

java项目_第171期ssm房屋租赁系统_计算机毕业设计

java项目_第171期ssm房屋租赁系统_计算机毕业设计 【源码请到下载专栏下载】 今天分享的项目是《ssm房屋租赁系统》 该项目分为2个角色&#xff0c;管理员和用户。 用户可以浏览前台,查看房屋租赁情况&#xff0c;并且进行租赁。 还可以登录到后台&#xff0c;进行租赁订单管理…

【20221212】【每日一题】一和零

给你一个二进制字符串数组 strs 和两个整数 m 和 n 。 请你找出并返回 strs 的最大子集的长度&#xff0c;该子集中 最多 有 m 个 0 和 n 个 1 。 如果 x 的所有元素也是 y 的元素&#xff0c;集合 x 是集合 y 的 子集 。 思路&#xff1a;背包有两个维度&#xff1a;m、n。不…

【工作项目总结】交易系统

写工作项目总结的目的就是,明明自己工作中负责了一些模块也写了很多代码,解决了不少坑。但是面试的时候,总是记不起来在自己过往做的项目中,该项目的具体亮点难点分别是什么,有哪些令人印象深刻的问题,以及是如何解决它的。那么记录问题与解决思维就是我创作这个工作复盘…

C#连接蓝牙设备

看过各种博主的文章&#xff0c;发现基本上都是属于误人子弟的狗屁文章&#xff0c;踩过各种坑最终实现了此功能。 1.思路 电脑蓝牙和蓝牙模块配对连接 和我们平时正常连接蓝牙设备一样&#xff0c;需要先搜索附近的蓝牙设备&#xff0c;然后根据设备名来选择要连接的蓝牙模块…

VSCODE 系列(六)使用Plantuml插件制作UML类图

文章目录前言下载和安装支持文件格式支持绘制类型导出语法申报要素UML类图关系参考例子参考前言 软件设计中&#xff0c;有好几种图需要画&#xff0c;比如流程图、类图、组件图等&#xff0c;我知道大部分人画流程图一般都会用微软的visio绘制&#xff0c;visio画图有个不好的…

[附源码]计算机毕业设计高校实验室仪器设备管理系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis MavenVue等等组成&#xff0c;B/S模式…

Java学习笔记 --- 反射

一、反射机制 Java Reflection 1、反射机制允许程序在执行期间借助于 ReflectionAPI取得任何类的内部信息&#xff08;比如成员变量&#xff0c;构造器&#xff0c;成员方法等&#xff09;&#xff0c;并能操作对象的属性及方法。反射在设计模式和框架底层都会用到 2、加载完…

数学基础从高一开始6、全称量词与存在量词

数学基础从高一开始6、全称量词与存在量词 目录 数学基础从高一开始6、全称量词与存在量词 全称量词 存在量词 1.判断命题的真假 2.判断命题的真假 阅读下列两组命题&#xff0c;语言上有什么特点? A组&#xff1a; (1)对任意一个x∈Z&#xff0c;2x1是整数; (2)每一个素…

Pod使用进阶

Pod使用进阶 封面 写在前面 语雀上阅读效果更佳&#xff0c;请访问如下地址&#xff1a; 197 Pod使用进阶 语雀 《197 Pod使用进阶》 1、Pod 资源配置 实际上上面几个步骤就是影响一个 Pod 生命周期的大的部分&#xff0c;但是还有一些细节也会在 Pod 的启动过程进行设置&…

Hive 计算用户留存率(次日,3日,N日)

文章目录什么是用户留存率&#xff1f;创建数据源计算留存率计算 N 日的留存率什么是用户留存率&#xff1f; 用户留存率是指在特定时间段内&#xff0c;用户在使用某个产品或应用程序后&#xff0c;再次使用该产品或应用程序的比例。 它可以帮助公司了解用户是否喜欢他们的产…

2022 第十四届蓝桥杯模拟赛第二期题目题解(比赛时使用方法)

目录 第一题&#xff1a;最小的2022 第二题&#xff1a;经过天数 第三题&#xff1a;特殊的十六进制数 第四题&#xff1a;矩阵的最小路径 第五题&#xff1a;质数拆分 第六题&#xff1a;拷贝时间 第七题&#xff1a;单词去重 第八题&#xff1a;最短回文串 第九题&a…