【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为开始查找的下 ...
随机推荐
- npm相关命令 npm 自定义脚本命令 自动重启应用
# 初始化生成package.json文件 npm init -y[不询问] # 查看本项目已安装模块 npm list # 安装模块 npm install 模块名[@版本号 可选] 或 npm ...
- 借助 DSL 来简化 Loadgen 配置
引言 在上篇文章中,我们介绍了如何用 Loadgen 来简化 HTTP API 的集成测试.在实际使用中会发现,编写测试时最令人"头疼"的部分是设计测试的输入和校验程序的输出,而针 ...
- ESM风潮下企业服务的最佳实践探讨
甄知科技孵化于中国领先的IT咨询服务提供商-上海汉得信息技术股份有限公司,主打产品"燕千云"于2019年正式发布,持续迭代版本至今,燕千云作为企业数字化服务平台,燕千云的愿景和现状 ...
- 燕千云 YQCloud 数智化业务服务管理平台 发布1.13版本
2022年6月10日,燕千云 YQCloud 数智化业务服务管理平台发布1.13版本.本次燕千云1.13版本新增了远程桌面.知识库多人在线协作.移动端疫苗核酸信息管理.单据委托代理.技能管理.产品自助 ...
- C++11智能指针 unique_ptr、shared_ptr、weak_ptr与定制删除器
目录 智能指针 场景引入 - 为什么需要智能指针? 内存泄漏 什么是内存泄漏 内存泄漏的危害 内存泄漏分类 如何避免内存泄漏 智能指针的使用及原理 RAII 简易例程 智能指针的原理 智能指针的拷贝问 ...
- Linux/Unix-stty命令详解
文章目录 介绍 stty命令的使用方法 stty的参数 我常用的选项 所有选项 介绍 stty用于查询和设置当前终端的配置. 如果你的终端回车不换行.输入命令不显示等各种奇葩问题,那么stty命令可以 ...
- FFmpeg变速处理视频文件
使用工具:小丸工具箱,HandBrake,FFmpeg 首先确定视频是否为VFR(可变帧率),如果是VFR需要在二次处理前转换成CFR(固定帧率) VFR转换CFR可以使用FFmpeg命令行或Hand ...
- 嵌入式测试手册——基于NXP iMX6ULL开发板（2）
基于测试板卡:创龙科技TLIMX6U-EVM是一款基于NXP i.MX 6ULL的ARM Cortex-A7高性能低功耗处理器设计的评估板,由核心板和评估底板组成.核心板经过专业的PCB Layout ...
- 统信 UOS 重置Root账号密码 获取 Root 权限
统信服务器默认无法用root 账号登入系统,用普通管理员登入后在切换至root账户下即可,初次使用系统时 切换至root账户前需要做很多配置 1.同信切换root账户首先要激活下系统,可以选择试用期激 ...
- vba--数组
Sub shishi() Range("e2") = Split(Range("e1"), "-")(0) '用短横线分隔后取第1个值 En ...