-
梨花未盛开2021-10-28 14:47
- 17
- 0
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="app"></div> <template id="a"> <table> <thead> <th>序号</th> <th>书籍名称</th> <th>出版日期</th> <th>价格</th> <th>购买数量</th> <th>操作</th> </thead> <tbody> <tr v-for="(book,index) in fliterBooks"> <td>{{index+1}}</td> <td>{{book.bookName}}</td> <td>{{book.date}}</td> <td>{{book.price}}</td> <td> <button :disabled="book.count<=1" @click="decrement(index)">-1</button> <span>{{book.count}}</span> <button @click="increment(index)">+1</button> </td> <td> <button @click="removeBook(index)">删除</button> </td> </tr> </tbody> </table> <h2>总价格:{{totalPrice}}</h2> </template> <script src="../vue3.js"></script> <script> Vue.createApp({ template:"#a", data() { return { books:[ { bookName:"算法导论", date:"2006-9", price:85, count:1 }, { bookName:"编程艺术", date:"2006-2", price:59, count:1 }, { bookName:"编程珠玑", date:"2008-10", price:39, count:1 }, { bookName:"代码大全", date:"2006-3", price:128, count:1 } ] } }, methods:{ decrement(index) { this.books[index].count--; }, increment(index) { this.books[index].count++; }, removeBook(index) { this.books.splice(index,1); } }, computed:{ totalPrice() { return this.books.reduce((pre,cur)=> { return pre+cur.price*cur.count; },0); }, fliterBooks() { return this.books.map(item=>{ const newItem=Object.assign({},item); newItem.price="$"+item.price; console.log(item); return newItem; }); } } }).mount("#app"); </script></body></html>fliterBooks() { return this.books.map(item=>{ const newItem=Object.assign({},item); newItem.price="$"+item.price; console.log(item); return newItem; }); }我就很奇怪,为什么<tr v-for="(book,index) in fliterBooks">为什么这个计算属性，在button点击(+1 -1)的时候，数据也会发生改变，明明没有进入响应式。totalPrice()引用的是books这个数组，可是点击的时候使用的是fliterBooks这个计算属性自己产生的对象，可是他也会发生改变，为什么啊？
0
打赏
收藏
点击回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部