【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; }
