【Vue】Re05 操作数组的API
一、响应式处理的操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<ul>
<li v-for="l in letters">{{l}}</li>
</ul> <hr> <p>
<button @click="arrayElPush" >push - 增加</button>
<br>
<button @click="changeElReAssignment" >assignment - 重新赋值</button>
<br>
<button @click="arrayElPop" >pop - 删除</button>
<br>
<button @click="arrayShift" >shift - 从头部删除</button>
<br>
<button @click="arrayUnshift" >unshift - 从头部添加</button>
<br>
<!--<button @click="arraySplice" >splice - 无参splice</button>-->
<button @click="arraySetElement" >set - 使用set赋值处理</button>
</p>
</div>
<script src="./../dependencies/vue.js"></script>
<script type="text/javascript">
const v = new Vue({
el : '#v',
data : {
letters : ['a', 'b', 'c', 'd', 'e']
},
methods : {
arrayElPush() {
// 1、在数组的结尾处增加一个元素 [会触发响应更新]
this.letters.push('element');
},
changeElReAssignment() {
// 2、赋值方法并不刷新页面 [不会触发响应更新]
this.letters[0] = 'sss';
},
arrayElPop() {
// 3、从最后一位删除元素 [会触发响应更新]
this.letters.pop();
},
arrayShift() {
// 4、删除数组第一位元素 [会触发响应更新]
this.letters.shift();
},
arrayUnshift() {
// 5、从第一位前面添加元素 [会触发响应更新]
this.letters.unshift('from-head-insert');
},
// push方法和unshift方法都支持了可变参数，意思是添加时可以支持多个元素一起注入添加
arraySplice() {
// 6、splice方法
this.letters.splice();
// 可用于删除元素 参数1 + 参数2 1指定起始位置， 2指定删除个数
// 可用于插入元素 参数1 + 参数2 + 参数3 1指定插入起始位置，2指定0，表示不删除，3 ~ n 添加要插入的元素
// 可用于替换元素 参数1 + 参数2 + 参数3 1指定替换位置，2指定要替换的个数， 3 ~ n 要替换的元素 // 参数1表示start 要执行数组操作的起始位置
// 参数2表示size 要执行删除操作的元素个数，注意，如果你没有提供此参数，注入了参数1，此函数将删除所有元素
// 参数3 ~ 参数n 要执行插入的具体元素
},
arrayChangeElement() {
Vue.set(this.letters, 0, 'sss');
},
arraySetElement() {
// 如果要更改元素的值，并且响应化处理，使用set方法实现
// 参数1表示要更改的数组，参数二表示更换的索引，参数表示更新的元素
Vue.set(this.letters, 0, 'sss');
}
}
});
</script> </body>
</html>
购物车演示案例：
【index.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="style.css"> </head>
<body> <div id="v">
<table border="1px">
<thead>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>单价金额</th>
<th>购买数量</th>
<th>操作选择</th>
</thead> <tbody>
<tr v-for="(book, i) in bookList">
<!--<td v-for="value in book">{{value}}</td>-->
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.date}}</td> <!-- 解决不显示小数点后两位的问题 <td>{{book.price}}</td> -->
<!-- 需要显示羊角符号 ￥ <td>{{'￥' + book.price.toFixed(2)}}</td> -->
<!-- 最后移交到函数中处理显示 -->
<td>{{showCompletePrice(book.price)}}</td> <td>
<button @click="decrement(i)" :disabled="book.count === 0"> - </button>
{{book.count}}
<button @click="increment(i)" :disabled="book.count === 10"> + </button>
</td>
<td>
<button @click="removeItem(i)">移除</button>
</td>
</tr> <tr>
<td colspan="6" style="text-align: center"> 合计金额 ：{{totalPrice}}</td>
</tr>
</tbody>
</table>
</div> <script type="text/javascript" src="../dependencies/vue.js"></script>
<script type="text/javascript" src="main.js"></script> </body>
</html>
【mains,js】
const v = new Vue({
el : '#v',
data : {
bookList : [
{ id : 1, name : 'aaa', date : '2020-10-26', price : 34.5, count : 0 },
{ id : 2, name : 'bbb', date : '2020-10-26', price : 31.5, count : 0 },
{ id : 3, name : 'ccc', date : '2020-10-26', price : 32.5, count : 0 },
{ id : 4, name : 'ddd', date : '2020-10-26', price : 33.5, count : 0 },
{ id : 5, name : 'eee', date : '2020-10-26', price : 33.5, count : 0 },
{ id : 6, name : 'fff', date : '2020-10-26', price : 31.5, count : 0 },
{ id : 7, name : 'ggg', date : '2020-10-26', price : 32.5, count : 0 },
]
},
methods : {
showCompletePrice(val) {
return '￥' + val.toFixed(2);
},
increment(index) {
this.bookList[index].count ++;
},
decrement(index) {
this.bookList[index].count --;
},
removeItem(index) {
this.bookList.splice(index, 1);
}
},
computed : {
totalPrice() {
let t = 0;
// for (let i = 0; i < this.bookList.length; i++) {
// t += this.bookList[i].price * this.bookList[i].count;
// }
for (let book of this.bookList) {
t += book.price * book.count;
}
return '￥' + t.toFixed(2);
}
}
});
css样式设计
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th, td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
【Vue】Re05 操作数组的API的更多相关文章
- vue操作数组时遇到的坑
用vue操作数组时,一般就那几个方法,而且是可以渲染的,但是有时候列表是渲染不了的先说下操作数组的几个方法吧 1 push ( ) 这个方法是在数组的最后面添加元素 用法: 括号里写需要加入的元素 ...
- Vue基础二之全局API、实例属性和全局配置，以及组件进阶（mixins）的详细教程（案列实现，详细图解，附源码）
本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...
- 常见数组&字符串API及其应用场景总结
数组API: String(arr):将arr中每个元素转化为字符串,逗号连接 场景:用于鉴别数据有没有修改等. ps:String是万能的 toString 只能转换除null和unde ...
- 关于javascript里面仿python切片操作数组的使用方法
其实在使用了好一段时间的 python之后,我觉得最让我念念不忘的并不是python每次在写函数或者循环的时候可以少用{}括号这样的东西(ps:其实也是了..感觉很清爽,而且又开始写js的时候老是想用 ...
- immutable日常操作之深入API
写在前面 本文只是个人在熟悉Immutable.js的一些个人笔记,因此我只根据我自己的情况来熟悉API,所以很多API并没有被列举到,比如常规的push/map/filter/reduce等等操作, ...
- vue $set修改数组
看了别人写的,自己简单写一下自己的理解. 因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化,所以,想要正常是不能通过操作数组来渲染dom的,解决的方法是通过set方法, 在组件 ...
- Vue源码探究-全局API
Vue源码探究-全局API 本篇代码位于vue/src/core/global-api/ Vue暴露了一些全局API来强化功能开发,API的使用示例官网上都有说明,无需多言.这里主要来看一下全局API ...
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
- delete和Vue.$delete删除数组的区别
delete delete只是被删除的元素变成了 empty/undefined ,其他的元素的键值对应关系还是不变. Vue.$delete 直接删除了数组中元素,数组的键值对应关系发生相应变化 例 ...
- 学习笔记-es5新增的一些数组的API(不全)-字符串-字符串API(不全)
### es5新增的数组的api + indexOf() 搜索数组中的元素,并返回它所在的位置. arr.indexOf(str,index) 参数: str为要查找的字符串 index为开始查找的下 ...
随机推荐
- INFINI Gateway 与华为鲲鹏完成产品兼容互认证
何为华为鲲鹏认证 华为鲲鹏认证是华为云围绕鲲鹏云服务(含公有云.私有云.混合云.桌面云)推出的一项合作伙伴计划,旨在为构建持续发展.合作共赢的鲲鹏生态圈,通过整合华为的技术.品牌资源,与合作伙伴共享商 ...
- 使用 INFINI Console 实现 Elasticsearch 的增量数据迁移
功能介绍 # 在 INFINI Console 1.3.0 版本里,数据迁移功能增加了对增量迁移的支持.这篇文章将会介绍增量迁移的具体使用方法和实现原理. 场景介绍 # 以常见的日志场景为例,假设 A ...
- 将MP4（视频）转换为MP3（音频）
使用VLC Media Player 步骤1. 在计算机上启动VLC Media Player,点击「媒体」并选择「转换/储存」. 步骤2. 点击「加入」以浏览并打开MP4文件,然后点击「Conver ...
- 已经有 Prometheus 了，还需要夜莺？
谈起当下监控,Prometheus 无疑是最火的项目,如果只是监控机器.网络设备,Zabbix 尚可一战,如果既要监控设备又要监控应用程序.Kubernetes 等基础设施,Prometheus 就是 ...
- 爬取m3u8加密视频
import random import os import re import requests import asyncio import aiohttp import time from lxm ...
- python pymysql 数据库查询操作
import pymysql db= pymysql.connect(host="", user='', database="", password='') c ...
- LED虚拟拍摄-跟踪算法
LED虚拟拍摄-跟踪算法 图引用拍摄黑科技,LED虚拟影棚揭秘 标定流程 上面是一台Track设备,现精度比较高的主要是Redspy,Mosys,一般影视用这二种,其底层技术参考SMAL单目+惯性传感 ...
- win11添加开机自启动
方法1 win + R 打开运行,输入 shell:startup 会打开一个文件夹 将想要启动的程序快捷方式放进文件夹 在设置里面搜索"启动",可以看到开机启动项,确认已经打开. ...
- sqoop导入导出到mysql，hbase，hive,hdfs系统，多表关联导出案例
Sqoop工具1.协助 RDBMS 与 Hadoop 之间进行高效的大数据交流.把关系型数据库的数据导入到 Hadoop 与其相关的系统 (如HBase和Hive)同时也可以把数据从 Hadoop 系 ...
- 实现Quartz.NET的HTTP作业调度
Quartz.NET作为一个开源的作业调度库,广泛应用于.NET应用程序中,以实现复杂的定时任务,本次记录利用Quartz.NET实现HTTP作业调度,通过自定义HTTP作业,实现对外部API的定时调 ...