【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为开始查找的下 ...
随机推荐
- 为何Mysql数据库上读和代码读取的数据不一致
上周,做了一个同步删除的功能,具体流程是,数据库删除-->调用第三方运行删除接口,同步删除. 具体流程 数据库删除数据后,这里使用标志删除,再调用第三方数据. 在调用第三方数据之前需要通过id查 ...
- promise async 和 await
// promise 是专门用于解决回调地狱的 // 专门用于执行异步程序时使用promise语法 // 语法形式: // ...
- 【Java面试题-基础知识02】Java抽象类和接口六连问？
1.抽象类和接口分别是什么? 抽象类是一种类,可以包含抽象方法和非抽象方法,抽象方法是没有具体实现的方法,需要在子类中被具体实现. 接口是一种完全抽象的类,其中的所有方法都是抽象方法,没有方法体,它只 ...
- docker综合应用
1.容器资源限制 官网文档 https://docs.docker.com/config/containers/resource_constraints/ 2.docker内存限制 -m或者--mem ...
- jsp和servlet的区别、共同点、各自应用的范围？
JSP是Servlet技术的扩展,本质上就是Servlet的简易方式.JSP编译后是"类servlet".Servlet和JSP最主要的不同点在于: Servlet的应用逻辑是在J ...
- org.elasticsearch.client.transport.NoNodeAvailableException: None of the configured nodes are available es端口号及集群名称
org.elasticsearch.client.transport.NoNodeAvailableException: None of the configured nodes are availa ...
- linux查看端口命令 lsof netstat
[root@VM-4-3-centos /]# lsof -i:8881COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAMEnode 15526 roo ...
- 【已结束】阿珏Blog三周年特别纪念活动
Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` [已结束]阿珏Blog三周年特别纪念活动 日期:2019- ...
- 2019南京区域赛ABCHJK题解 & KM-bfs(O(n^3))板子
A.Hard Problem 题目大意:给你一个数n,然后让你计算一个子集大小,这个大小的子集要保证一定存在一个数是另一个数的约数,求出这个最小的数. 做法:显然后面的\(\frac{n}{2}\)个 ...
- 了解Microsoft Media Foundation
关于Microsoft Media Foundation 是什么 Microsoft Media Foundation是用来处理(创建.修改.传输.合成)多媒体数据(音视频)的一个平台. 有什么用 M ...