【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为开始查找的下 ...
随机推荐
- Javascript高级程序设计第三章 | ch3 | 阅读笔记
语言基础 语法 标识符 注释 // /* */ 严格模式 // 也可以单独指定在一个函数中进行 'use strict' 语句 语句末尾分号不是必须的,但是最好加上 加上分号方便开发者删除空行压缩代码 ...
- el-upload拍照上传多个文件报错 ERR_UPLOAD_FILE_CHANGED问题
最近同事使用el-upload上传图片时出现一个问题,连续拍照多个图片的时候,循环调用接口上传会报错: ERR_UPLOAD_FILE_CHANGED,网上找了很多方案没有解决,下面是我自己的解决过程 ...
- 5分钟带你了解RabbitMQ的（普通/镜像）集群
前言 让我们深入探讨RabbitMQ的集群配置,了解各种集群模式的利弊.本次讨论的重点是帮助您快速理解RabbitMQ集群的运作方式,以及选择最适合您需求的模式.好的,话不多说.在RabbitMQ中, ...
- # android studio启动虚拟机长时间无响应，无法启动
问题 虚拟设备长时间不响应,无法启动设备 方案 根据 android studio启动虚拟器失败 尝试删除锁文件 失败,.android 目录下不存在锁文件 电脑内存或计算配置不足 查看了模拟器需要的 ...
- Qt 应用程序中自定义鼠标光标
在 Qt 应用程序中,你可以自定义鼠标光标.你可以使用 `QCursor` 类来设置不同类型的鼠标光标,比如内置样式或者自定义的图片.以下是一些使用示例: 使用内置光标样式 Qt 提供了一些内置的光标 ...
- 一款.NET开源的i茅台自动预约小助手
前言 今天大姚给大家分享一款.NET开源.基于WPF实现的i茅台APP接口自动化每日自动预约(抢茅台)小助手:HyggeImaotai. 项目介绍 该项目通过接口自动化模拟i茅台APP实现每日自动预约 ...
- VMware 17 Exception 0xc0000094 解决
VMWare16的虚拟机升级到17时, 可能会出现虚拟机可以正常使用, 但编辑设置就会出现vmui错误的现像. VMware Workstation unrecoverable error: (vmu ...
- MySQL日志（redo log、binlog）刷盘策略
通过上篇文章,我们知道MySQL是采用两段提交策略来保证事务的原子性的,redo log刷盘的时机是在事务提交的commit阶段采取刷盘的,在此之前,redo log都存在于redo log buff ...
- SpringBoot打包maven仓库里面没有的包
SpringBoot打包maven仓库里面没有的包 在遇到一些自定义的jar包,maven仓库里面没有这些包,但是发布线上时我们还是只想发布一个jar包,也就是我们想要把第三方包打在最后生成的大jar ...
- 光伏储能电厂设备连接iec61850平台解决方案
在当今日益发展的电力系统中,光伏储能技术以其独特的优势逐渐崭露头角,成为可再生能源领域的重要组成部分.而在光伏储能系统的运行与监控中,通信协议的选择与实现则显得至关重要.本文将重点介绍光伏储能系统中的 ...