Vue的v-for指令、事件处理、表单控制

一 条件渲染

指令释义
v-if相当于: if
v-else相当于:else
v-else-if相当于:else if
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>if、else if、else</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><h3>案例:if、else if、else</h3><h2 v-if="type==='1'">A</h2><h2 v-else-if="type==='2'">B</h2><h2 v-else>C</h2>
</div>
</body>
<script>let vm = new Vue({el: '#box',data: {type: '1',}})
</script>
</html>

二 列表渲染

1. v-if+v-for+v-else控制购物车商品的显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-if + v-for + v-else控制购物车商品的显示</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><style>table, td {border: 1px solid black;text-align: center;}</style>
</head>
<body>
<div id="box"><h2>我的购物车</h2><button @click="show">刷新购物车</button><br><br><table v-if="!shopping_car.length==0"><tr><td>商品名称</td><td>价格</td></tr><tr v-for="item in shopping_car"><td>{{item.name}}</td><td>{{item.price}}</td></tr></table><table v-else><tr><td>商品名称</td><td>价格</td></tr><tr><td>暂无信息</td><td>暂无信息</td></tr></table>
</div>
</body>
<script>let vm = new Vue({el: '#box',data: {isActive: false,shopping_car: []},methods: {show() {this.shopping_car = [{name: 'Threadripper 3990X', price: '29999元'},{name: 'NVIDIA RTX 8000', price: '59999元'},{name: 'ROG ZENITH II EXTREME', price: '9999元'},]}}})
</script>
</html>

2. v-for遍历数组(列表)、对象(字典)、数字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-for遍历数组(列表)、对象(字典)</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><style>table, td {border: 1px solid black;text-align: center;}</style>
</head>
<body><div id="box"><h2>数组(列表)for循环遍历</h2><ul><li v-for="(value,index) in list_test">{{index}} —— {{value}}</li></ul><h2>对象(字典)for循环遍历</h2><ul><li v-for="(value,key) in dic_test">{{key}} —— {{value}}</li></ul><h2>数组(列表)套对象(字典)for循环遍历</h2><table><tr><td>姓名</td><td>年龄</td><td>性别</td><td>国籍</td></tr><tr v-for="info in summary_test"><td>{{info.name}}</td><td>{{info.age}}</td><td>{{info.gender}}</td><td>{{info.country}}</td></tr></table>
</div>
</body>
<script>let vm = new Vue({el: '#box',data: {list_test: ['First', 'second', 'Third', 'Forth', 'Fifth'],dic_test:{name: 'Darker', age: 18, gender: 'male'},summary_test: [{name: 'Alan', age: 23, gender: 'male', country: 'America'},{name: 'Ben', age: 15, gender: 'male', country: 'Australia'},{name: 'Cindy', age: 12, gender: 'female', country: 'Japan'},{name: 'Darker', age: 18, gender: 'male', country: 'China'},{name: 'Elisa', age: 26, gender: 'female', country: 'Mexico'},]}})
</script>
</html>

注意!Vue中:

  • 数组indexvalue反的
  • 对象keyvalue也是反的

3. key值 的解释

vue中使用的是虚拟DOM,会和原生的DOM进行比较,然后进行数据的更新,提高数据的刷新速度(虚拟DOM用了diff算法)

  • v-for循环数组、对象时,建议在控件/组件/标签写1个key属性,属性值唯一
  • 页面更新之后,会加速DOM的替换(渲染)
  • :key="变量"

4. 数组更新与检测

可以检测到变动的数组操作:
  • push:最后位置添加
  • pop:最后位置删除
  • shift:第一个位置删除
  • unshift:第一个位置添加
  • splice:切片
  • sort:排序
  • reverse:反转
检测不到变动的数组操作:
  • filter():过滤
  • concat():追加另一个数组
  • slice():
  • map():
原因:

作者重写了相关方法(只重写了一部分方法,但是还有另一部分没有重写)

解决方法:
// 方法1:通过 索引值 更新数组(数据会更新,但是页面不会发生改变)
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"// 方法2:通过 Vue.set(对象, index/key, value) 更新数组(数据会更新,页面也会发生改变)
Vue.set(vm.arrayList, 0, 'Darker')

三 事件处理

事件释义
input当输入框进行输入的时候 触发的事件
change当元素的值发生改变时 触发的事件
blur当输入框失去焦点的时候 触发的事件

change 和 blur 最本质的区别:

  • 如果输入框为空,失去焦点后,change不会触发,但是blur会触发

1.过滤案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过滤案例</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><p><input type="text" v-model="myText" @input="handleInput" placeholder="请输入要筛选的内容:"></p>
<!-- <p><input type="text" v-model="myText" @change="handleInput" placeholder="请输入要筛选的内容:"></p> -->
<!-- <p><input type="text" v-model="myText" @blur="handleInput" placeholder="请输入要筛选的内容:"></p> --><ul><li v-for="data in newList">{{data}}</li></ul>
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {myText: '',dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],},methods: {handleInput() {this.newList = this.dataList.filter(item => {// item.indexOf(this.myText):输入框中输入的字符串在筛选元素中的索引return item.indexOf(this.myText) > -1   // 返回索引大于1的元素:>-1 就表示包含在其中})},},})
</script>
</html>

2.事件修饰符

事件修饰符释义
.stop只处理自己的事件,父控件冒泡的事件不处理(阻止事件冒泡)
.self只处理自己的事件,子控件冒泡的事件不处理
.prevent阻止a链接的跳转
.once事件只会触发一次(适用于抽奖页面)

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生

  • 用 v-on:click.prevent.self 会阻止所有的点击
  • 而 v-on:click.self.prevent 只会阻止对元素自身的点击
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件修饰符</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<!--    <ul @click="handleUl">--><ul @click.self="handleUl">
<!--        <li v-for="data in dataList" @click="handleLi">{{data}}</li>--><li v-for="data in dataList" @click.stop="handleLi">{{data}}</li><li><a href="http://www.baidu.com">不拦截</a></li><li><a href="http://www.baidu.com" @click="handleLink($event)">点击拦截</a></li><li><a href="https://www.baidu.com" @click.prevent="handleLink">点击拦截</a></li><li><button @click.once="test">只执行一次</button></li></ul>
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {dataList: ['1','22','333','4444']},methods: {handleUl(ev){console.log('ul被点击了')},handleLi(){console.log('li被点击了')ev.stopPropagation()    // 点击事件停止 冒泡(向父组件传递时间)},handleLink(ev){ev.preventDefault()},test(){alert('只触发1次')}}})
</script>
</html>

3.按键修饰符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按键修饰符</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><!--    <input type="text" v-model="myInput" @keyup="handleKey">--><!--    <input type="text" v-model="myInput" @keyup.13="handleKey">--><input type="text" @keyup="handleKey1"><input type="text" @keyup.enter="handleKey2">
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {dataList: ['1', '22', '333', '4444']},methods: {handleKey1(ev) {console.log('按下了' + ev)// if (ev.keyCode==13){//     console.log('回车键被按下了')// }},handleKey2(ev) {console.log('按下了回车键')}}})
</script>
</html>

四:数据双向绑定

v-model的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><input type="text" v-model="myText" placeholder="请输入内容">您输入的内容是:{{myText}}
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {myText: '',},})
</script>
</html>

五:表单控制

1.checkbox选中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>checkbox</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><input type="text" placeholder="请输入用户名:"><br><input type="password" placeholder="请输入密码:"><br><input type="checkbox" v-model="radio">记住用户名
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {myText: '',textBig: '',radio: false,},})
</script>
</html>

2.单选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>单选</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><input type="radio" v-model="radio" value="男"><input type="radio" v-model="radio" value="女"><input type="radio" v-model="radio" value="保密">保密<br><br>您选择的性别:{{radio}}
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {radio: '',},})
</script>
</html>

3.多选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多选</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><input type="checkbox" v-model="many" value="篮球">篮球<input type="checkbox" v-model="many" value="足球">足球<input type="checkbox" v-model="many" value="棒球">棒球<input type="checkbox" v-model="many" value="桌球">桌球<br><br>您喜欢的球类:{{many}}
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {many: [],},})
</script>
</html>

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

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

相关文章

详细探讨mfc140.dll丢失的解决方法,并比较各种方法的优劣

mfc140.dll是Microsoft Foundation Class (MFC) 库中一个重要的DLL文件&#xff0c;它包含了多个执行程序使用的函数和资源。这个库通常用于开发Windows操作系统上的应用程序。但有时会发生mfc140.dll缺失或损坏的错误&#xff0c;导致一些依赖它的应用程序无法运行。今天的这篇…

python语言在web上的应用:如何节省服务器资源?

背景介绍​ 在web开发中的应用广泛​ 在web开发中的应用广泛。随着互联网的发展&#xff0c;web应用越来越普遍&#xff0c;而Python作为一种简洁、高效的编程语言&#xff0c;被广泛应用于web开发领域。Python提供了丰富的库和框架&#xff0c;如Django、Flask等&#xff0c…

2024年中国电子学会青少年编程等级考试安排的通知

各有关单位、全体考生: 中国电子学会青少年等级考试&#xff08;以下简称等级考试&#xff09;是中国电子学会为落实《全民科学素质行动规划纲要》&#xff0c;提升青少年电子信息科学素质水平而开展的社会化评价项目。等级考试自2011年启动以来&#xff0c;作为中国电子学会科…

微服务概述之单体架构

微服务概述 互联网始于 1969年美国的阿帕网&#xff08;ARPA&#xff09;&#xff0c;最开始的阿帕网只在美国军方使用。随着时间的推移&#xff0c;一些大学也开始加入建设&#xff0c;慢慢演化成了现在的因特网 &#xff08;Internet&#xff09;。随着计算机网络的普及&…

使用STM32和MPU6050实现基于手势的室内导航系统

基于STM32和MPU6050的基于手势的室内导航系统是一个创新而具有挑战性的项目。在本文中&#xff0c;我们将介绍如何利用STM32微控制器和MPU6050传感器实现基于手势的室内导航系统&#xff0c;并提供相应的代码示例。 1. 系统概述 基于手势的室内导航系统旨在通过手势识别的方式…

Web前端-jQuery

文章目录 jQuery1.1 jQuery 介绍1.1.1 JavaScript 库1.1.2 jQuery的概念1.1.3 jQuery的优点 1.2 jQuery 的基本使用1.2.1 jQuery 的下载1.2.2 jQuery快速入门1.2.3 jQuery入口函数1.2.4 jQuery中的顶级对象$1.2.5 jQuery 对象和 DOM 对象1.2.6. jQuery 对象和 DOM 对象转换 1.3…

Vmware安装Windows11系统及下载MySQL步骤(超详细)

一、创建虚拟机 ①选择自定义 ②直接点击下一步 ③选择Windows 11 x64 ④命名虚拟机以及选择路径 ⑤新版本的虚拟机需要加密&#xff08;密码需要8个字符以上&#xff09; ⑥选择UEFI ⑦处理器配置&#xff08;根据自己的需求&#xff09; ⑧设置虚拟机的内存 ⑨选择不使用网络…

智能监控:业务监控新选择,效率提升新动力

前言 随着科技的飞速发展&#xff0c;企业对于业务的稳定性和连续性要求越来越高。传统的监控方式虽然在一定程度上能够保证业务的正常运行&#xff0c;但在面对复杂多变的业务场景和日益增长的数据量时&#xff0c;往往显得力不从心。为了解决这一问题&#xff0c;观测云在提…

【网络工程师】ACL访问控制列表

一、ACL概述 1、Access Contral List 访问控制列表 2、ACL是一种包过滤技术。 3、ACL基于&#xff08;三层&#xff09;IP包头的IP地址、&#xff08;四层&#xff09;TCP/UDP头部的端口号&#xff3b;五层数据不能&#xff3d; &#xff14;、ACL在路由器上配置&#xff0…

ensp与HCL共存问题

华子目录 第一种方法第二种方法&#xff08;修改注册表&#xff0c;建议使用这种方法&#xff09;第一步第二步第三步&#xff08;打开注册表修改&#xff09;第四步&#xff08;安装HCL&#xff09;第六步&#xff08;将注册表中修改的改回原来的内容&#xff09;最后 第一种方…

【论文阅读】深度学习中的后门攻击综述

深度学习中的后门攻击综述 1.深度学习模型三种攻击范式1.1.对抗样本攻击1.2.数据投毒攻击1.3.后门攻击 2.后门攻击特点3.常用术语和标记4.常用评估指标5.攻击设置5.1.触发器5.1.1.触发器属性5.1.2.触发器类型5.1.3.攻击类型 5.2.目标类别5.3.训练方式 1.深度学习模型三种攻击范…

【Spring Boot 3】【数据源】自定义JDBC多数据源

【Spring Boot 3】【数据源】自定义JDBC多数据源 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术…

软件工程概论---内聚性和耦合性

目录 一.耦合性 1.内容耦合 2.公共耦合 4.控制耦合 5.标记耦合&#xff08;特征耦合&#xff09; 6.数据耦合 7.非直接耦合 二.内聚性 1.偶然内聚 2.逻辑内聚 3.时间内聚 4.过程内聚 5.通信内聚 6.顺序内聚 7.功能内聚 一.耦合性 耦合性是指软件结构中模块相互…

机器学习 前馈神经网络

人工神经网络&#xff08;Artificial Neural Network&#xff0c;ANN&#xff09;是指一系列受生物学和神经科学启发的数学模型&#xff0e;这些模型主要是通过对人脑的神经元网络进行抽象&#xff0c;构建人工神经元&#xff0c;并按照一定拓扑结构来建立人工神经元之间的连接…

大模型生成解码参数速查

控制输出长度的参数 控制所使用的生成策略的参数 用于操作模型输出 logits 的参数 定义“generate”输出变量的参数 可以在生成时使用的特殊字符

Java中SpringBoot组件集成接入【Knife4j接口文档(swagger增强)】

Java中SpringBoot组件集成接入【Knife4j接口文档】 1.Knife4j介绍2.maven依赖3.配置类4.常用注解使用1.实体类及属性(@ApiModel和@ApiModelProperty)2.控制类及方法(@Api、@ApiOperation、@ApiImplicitParam、 @ApiResponses)3.@ApiOperationSupport注解未生效的解决方法5.…

头歌:旅游网站之数据分析

第1关 统计每个城市的宾馆平均价格 package com.processdata;import java.io.IOException; import java.util.Scanner;import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.conf.Configured; import org.apache.hadoop.hbase.HBaseConfiguration; import …

线扫相机品牌汇总(国外+国内)

线扫相机品牌汇总(国外+国内) 行者 ​ 热爱生活 22 人赞同了该文章 线扫相机也叫做线阵相机,和面阵相机一样,都是重要的工业相机。 线扫相机正如其名字那样,拍照时像扫描一样,相机和被拍照物体有相对匀速运动。 Perhaps the most common example of line scan imagin…

vue3 封装一个按钮组件(可自定义按钮样式)

效果图 鼠标悬浮有对应的文字提示&#xff0c;且图标出现背景色和颜色 实现 目前提供五个固定样式的图标及三个用户自定义的图标&#xff0c;可根据需要补充 组件代码 <script setup lang"ts"> import { onMounted, PropType, reactive, ref, watch } from v…

JavaScript:字符串的相关方法

字符串的相关方法: 字符串的所有实例方法&#xff0c;都可以通过基本数据类型字符串去调用 字符串其本质就是一个字符数组 str.length 获取字符串的长度 str[index] 获取指定位置的字符 // 创建一个字符串var str Hello; //[H,e,l,l,o]// str[0] c;// console.log(str.l…