【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为开始查找的下 ...
随机推荐
- #9134.反转eehniy
blog 题面 yinhee 去面试 Google 总裁. 面试官给他了一个长度为 \(n\) 的 \(01\) 串. 面试官给他以下两种操作是的这个序列前 \(n-m\) 个数字与后 \(n-m\) ...
- JAVA IDEA Maven 加速镜像 阿里云
JAVA IDEA Maven 加速镜像 阿里云 如果是IDEA自带的则在: C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 20 ...
- redis实战技巧
1.分析key大小 [root@db-51 ~]#redis-cli -h 10.0.0.51 -p 6380 --bigkeys # Scanning the entire keyspace to ...
- word文档生成视频，自动配音、背景音乐、自动字幕，另类创作工具
简介 不同于别的视频创作工具,这个工具创作视频只需要在word文档中打字,插入图片即可.完事后就能获得一个带有配音.字幕.背景音乐.视频特效滤镜的优美作品. 这种不要门槛,没有技术难度的视频创作工具, ...
- hbase的优缺点
一. 一个关于hbase介绍全面的博客地址 https://www.csdn.net/gather_22/MtTaEgysNjYwOS1ibG9n.html 优点: 1,方便高效的压缩数据. 2,支持 ...
- 我又学会了使用Range实现网络文件下载的断点续传
目录 前言 1.Range请求头 1.1.概述 1.2.使用限制 1.3.范围请求 1.4.预防资源变更 2.断点续传下载实现 2.1.流程设计 2.2.代码实现 2.3.运行结果 3.RandomA ...
- 高通安卓：自定义QFile烧录镜像
高通安卓:自定义QFile烧录镜像 背景 在某个项目中,因为USB口的问题,无法使用fastboot进行download. 同事提供了一份用与QFile的rawprogram.xml烧写.觉得这个方法 ...
- Android案例分享，基于瑞芯微RK3568国产平台！
开发环境说明 Windows开发环境:Windows7 64bit.Windows10 64bit 虚拟机:VMware15.5.5 AndroidSDK编译环境:Ubuntu18.04.4 64bi ...
- 【资料分享】基于TI Sitara系列AM3352/AM3354/AM3359核心板规格书
1 核心板简介 创龙科技SOM-TL335x-S是一款基于TI Sitara系列AM3352/AM3354/AM3359 ARM Cortex-A8高性能低功耗处理器设计的低成本工业级核心板,通过邮票 ...
- 2个qubit的量子门
量子计算机就是基于单qubit门和双qubit门的,再多的量子操作都是基于这两种门.双qubit门比单qubit门难理解得多,不过也重要得多.它可以用来创建纠缠,没有纠缠,量子机就不可能有量子霸权. ...