vue3(二)-基础入门

一、列表渲染

of 和 in 都是一样的效果

html代码:

<div id="app"><ul><li v-for="item of datalist">{{ item }}</li></ul><ul><li v-for="item in dataobj">{{ item }}</li></ul><!-- 括号内的 index,item ,位于第一项的是数组的值,第二项的是数组的索引--><ul><li v-for="(index,item) of datalist">{{ item }}----{{ index }}</li></ul><!-- 括号内的 item,key ,位于第一项的是对象的值,第二项的是对象的键--><ul><li v-for="(item,key) in dataobj">{{ item }}----{{ key }}</li></ul>
</div>

javascript:

<script>const { createApp, ref } = VuecreateApp({data() {return {datalist: ['111', '222', '333'],dataobj: {a: '1',b: '2',c: '3'}}}}).mount('#app')
</script>

结果展示:
在这里插入图片描述

二、列表key值设置

  1. 跟踪每个节点的身份,从而重用和重新排序现有的元素

  2. 理想的key值是每项都有唯一的id

<ul><li v-for="item in dataobj" key="item.id">{{ item }}</li>
</ul>

三、列表数组检测

  1. vue中可以检测数组变动的函数,数组变动界面中的数据发生改变

1、push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2、根据索引对数组进行重新赋值

  1. vue中调用以下函数,返回一个新数组,原数组没变,界面的数据不会发生改变

filter()、concat()、slice()、map()

四、filter应用-模糊查询

html:

<input type="text" @input="onchange()" v-model="inputText" />
<ul><li v-for="item in datalist">{{ item }}</li>
</ul>

javascript:

<script>const { createApp, ref } = Vueconst vm = createApp({data() {return {datalist: ['1aa11', '22dd2', '33gg3', 'qqa11', '2rrd2', 'dgklg3'],datalist1: ['1aa11', '22dd2', '33gg3', 'qqa11', '2rrd2', 'dgklg3'],inputText: ''}},methods: {onchange() {this.datalist = this.datalist1.filter(item => {return item.indexOf(this.inputText) > -1})}}}).mount('#app')
</script>

五、事件修饰符

1.stop 与 self 修饰符

当子节点触发事件后,若父节点有触发事件,父节点也会跟着触发

1.1.没有添加事件修饰符

html:

<ul @click="clickUlHandler()"><li @click="clickLiHandler()">1111</li>
</ul>

javascript:

<script>const { createApp, ref } = Vueconst vm = createApp({methods: {clickUlHandler() {console.log('ul触发了')},clickLiHandler() {console.log('li触发了')}}}).mount('#app')
</script>

点击 < li >标签,< ul > 标签的事件也触发了
在这里插入图片描述
1.2.添加事件修饰符 stop:
stop 只能添加在 < li >
html:

<ul @click="clickUlHandler()"><li @click.stop="clickLiHandler()">1111</li>
</ul>

只触发了 < li > 的事件
在这里插入图片描述
1.3.添加事件修饰符 self:
self 只能添加在 < ul >

<ul @click.self="clickUlHandler()"><li @click="clickLiHandler()">1111</li>
</ul>

只触发了 < li > 的事件
在这里插入图片描述

还可以通过 e.stopPropagation() 解决以上问题

clickLiHandler(e) {e.stopPropagation()console.log('li触发了')
} 

2.prevent

点击链接后页面会跳转,通过 prevent 阻止页面跳转

html:

<a href="www.baidu.com" @click.prevent="clickChangePage($event)">跳转页面
</a>

javascript:

<script>const { createApp, ref } = Vueconst vm = createApp({methods: {clickChangePage(e) {// e.preventDefault()  也可以通过调用该方法阻止页面跳转console.log('页面跳转了')}}}).mount('#app')</script>

3.once

被该修饰符修饰的事件只触发一次

html:

<ul @click="clickUlHandler()"><li @click.once="clickLiHandler()">1111</li>
</ul>

javascript:

<script>const { createApp, ref } = Vueconst vm = createApp({methods: {clickUlHandler() {console.log('ul触发了')},clickLiHandler() {console.log('li触发了')}}}).mount('#app')
</script>

< li > 只触发一次,而 < ul > 可以触发多次

在这里插入图片描述

六、按键修饰符

1.enter

html:

<input type="text" @keyup.enter="keyupHandle($event)" v-model="inputText"/>
<!-- 通过 @keyup.键值 效果一样-->
<!-- <input type="text" @keyup.13="keyupHandle($event)" v-model="inputText" /> -->

javascript:

<script>const { createApp, ref } = Vueconst vm = createApp({methods: {keyupHandle(e) {// 通过判断键值效果一样// if (e.keyCode === 13) {//   console.log(this.inputText)// }console.log(this.inputText)}}).mount('#app')
</script>

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

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

相关文章

Flask,uWSGI,nginx的理解

文章目录 前言与背景理解 - FlaskuWSGInginx理解 - nginx理解 - FlaskuWSGI理解 - vuedjangonginx 前言与背景 此篇文章是针对小白的一篇理解Flask&#xff0c;uWSGI&#xff0c;nginx的文章&#xff0c;只介绍了理解&#xff0c;并没有介绍如何部署。 由于工作需要使用flask…

npm pnpm yarn(包管理器)的安装及镜像切换

安装Node.js 要安装npm&#xff0c;你需要先安装Node.js。 从Node.js官方网站&#xff08;https://nodejs.org&#xff09;下载并安装Node.js。 根据你的需要选择相应的版本。 一路Next&#xff0c;直到Finish 打开CMD&#xff0c;输入命令来检查Node.js和npm是否成功安装 nod…

Gin 学习笔记02-参数获取

Gin 参数获取 1、获取url 参数2、获取动态 url 参数3、获取 form 表单数据 1、获取url 参数 Query()GetQuery()QueryMap()DefaultQuery() package mainimport ("fmt""github.com/gin-gonic/gin""net/http" )func _query(c *gin.Context) {// 1…

Docker Swarm总结+基础、集群搭建维护、安全以及集群容灾(1/4)

博主介绍&#xff1a;Java领域优质创作者,博客之星城市赛道TOP20、专注于前端流行技术框架、Java后端技术领域、项目实战运维以及GIS地理信息领域。 &#x1f345;文末获取源码下载地址&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb;…

【WSA】无法打开 适用于 Android™ 的 Windows 子系统,因为它处于脱机状态。可能缺少存储设备,或者存储设备已断开连接。

问题描述 之前可以正常使用适用于 Android™ 的 Windows 子系统&#xff08;WSA&#xff09;&#xff0c;但突然间无法启动了。 当尝试启动WSA中的软件时&#xff0c;都会出现以下错误提示&#xff1a; 无法打开 适用于 Android™ 的 Windows 子系统&#xff0c;因为它处于脱…

chrome driver 截图和填表

昨天突然有一个需求&#xff08;自己的&#xff09;&#xff0c;想把某个网站题目主体部分翻译并保存成图片&#xff0c;开始时用了国内网站的翻译&#xff08;人工、简单翻译&#xff09;&#xff0c;后来发现很多地方翻译的不尽人意&#xff0c;于是只好用翻译插件对原始网站…

2311skia,04绘制路径

分析Skia绘画路径代码 绘画路径尽管使用频率相对绘画图像,绘画文本低,但却是非常重要的一个基本特性.所有不规则图形(椭圆,圆角矩形,三角形,简单的文字),最后都要绘画路径. 而且,若自己实现一个2D引擎,这块内容是很有参考意义的,用OpenGL,都很少关注采样图像了,对对坐标就好. …

cjson库打包数据实现方法

使用 cJson 库&#xff0c;在C语言环境下&#xff0c;打包一个cJson字符串&#xff1a; int CreateArryJsonString(void) {cJSON *cJsonArr cJSON_CreateArray();cJSON *sJsonObj1 cJSON_CreateObject();cJSON_AddStringToObject(sJsonObj1, "test1", "test1…

动态规划学习——子序列问题

目录 ​编辑 一&#xff0c;最长定差子序列 1.题目 2&#xff0c;题目接口 3&#xff0c;解题思路及其代码 一&#xff0c;最长定差子序列 1.题目 给你一个整数数组 arr 和一个整数 difference&#xff0c;请你找出并返回 arr 中最长等差子序列的长度&#xff0c;该子序列…

机器学习【03】在本地浏览器使用远程服务器的Jupyter Notebook【conda环境】

1.激活虚拟环境 conda activate 虚拟环境名字2.虚拟环境下安装jupyter notebook pip install jupyter3.配置 jupyter 文件 在 Jupyter Notebook 的配置目录中生成一个配置文件 jupyter_notebook_config.py jupyter notebook --generate-config3.设置密码 jupyter notebook …

C/C++ 常用加密与解密算法

计算机安全和数据隐私是现代应用程序设计中至关重要的方面。为了确保数据的机密性和完整性&#xff0c;常常需要使用加密和解密算法。C是一种广泛使用的编程语言&#xff0c;提供了许多加密和解密算法的实现。本文将介绍一些在C中常用的加密与解密算法&#xff0c;这其中包括Xo…

[vxe-table] vxe-table-column配合v-if导致列样式与位置错乱

<vxe-table-column v-if"pageInfo.id 4 ||pageInfo.id 8" title"上报类型" width"100" key1><template v-slot"{row}"><span>咨询工具</span></template> </vxe-table-column>//或者<vxe-ta…

操作NAND flash W25N01G

文章目录 W25N01G1 描述2 特点3 封装3.3.2 连接线 4 引脚/CSDO/WP/Hold SPI指令标准SPI命令双SPI四元SPI命令写保护 5 地址PA与PC最后一个扇区 OTP寄存器1块保护清除块保护指令* WP-E 寄存器2寄存器3BUSYP-FAILE-FAILECC位 8 命令8.1 装置ID 指令解读写状态寄存器 注意内容上拉…

Java,File类与IO流,处理流:缓冲流、转换流、数据流、对象流

目录 处理流之一&#xff1a;缓冲流 四种缓冲流&#xff1a; 缓冲流的作用&#xff1a; 使用的方法&#xff1a; 处理文本文件的字符流&#xff1a; 处理非文本文件的字节流&#xff1a; 操作步骤&#xff1a; 处理流之二&#xff1a;转换流 转换流的使用&#xff1a; …

企业编码生成程序Python毕业设计

&#xff08;1&#xff09;生成6位数字防伪编码。当用户在主程序界面中输入数字“1”菜单项时&#xff0c;将进入“生成6位数字防伪编码 &#xff08;213563型&#xff09;”的功能执行任务。此时要求输入生成防伪码的数量&#xff0c;可以根据需要输入生成防伪码的数量。按下&…

范围查询 range级别 继续优化思路

问题&#xff1a; 这几天工作遇到了一个问题。千万级别的表&#xff0c;每秒钟产生很多数据&#xff0c;select count(id) from table where flag 1 and create_time < 2023.11.07;分区表&#xff0c;range级别&#xff0c;已经是走create_time列上的索引&#xff0c;flag…

springboot宠物店管理系统-计算机毕设 附源码 32041

SpringBoot宠物店管理系统 摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;宠物行业当然也不例外。宠物店管理系统是以实际运用为开发背景&#xff0c;运用软件工程原理…

多级嵌套vue同步调用用法

//需求 要求同步调用initGame2方法 //调用方法 this.initSocket(); //定义方法为同步 async initSocket() { //调用为同步 await this.initGame2(); //定义方法为同步 async initGame2() {const e await w({ url: //定义w方法 const w e.create({ baseURL: http://my_url:8…

python pdf转txt文本、pdf转json

文章目录 一、前言二、实现方法1. 目录结构2. 代码 一、前言 此方法只能转文本格式的pdf&#xff0c;如果是图片格式的pdf需要用到ocr包&#xff0c;以后如果有这方面需求再加这个方法 二、实现方法 1. 目录结构 2. 代码 pdf2txt.py 代码如下 #!/usr/bin/env python # -*- …