jsp网站开发案例,网站盗号怎么做,网站可以不备案吗,互联网招聘网站排名使用了v-model指令来实现全选/全不选的功能#xff0c;当全选框被点击时#xff0c;isAllChecked的值会被改变。使用了v-if指令来判断购物车中是否有商品#xff0c;如果有商品则渲染商品列表#xff0c;否则显示购物车为空的提示。使用了v-for指令来遍历datalist数组…使用了v-model指令来实现全选/全不选的功能当全选框被点击时isAllChecked的值会被改变。使用了v-if指令来判断购物车中是否有商品如果有商品则渲染商品列表否则显示购物车为空的提示。使用了v-for指令来遍历datalist数组渲染每个商品项。使用了change事件来监听商品项的选择状态改变当商品项被选中或取消选中时handleItemChange方法会被调用。使用了click事件来监听减少数量和增加数量按钮的点击事件分别调用item.number–和item.number来改变商品数量。使用了:disable属性绑定来控制减少数量和增加数量按钮的禁用状态。使用了click事件来监听删除按钮的点击事件调用handleDel方法来删除对应的商品项
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript srcvue.js/scriptstyleli {display: flex;justify-content: space-between;align-items: center;padding: 10px;border: 1px solid red;}li img {width: 100px;}/style/headbodydiv idboxulliinputtypecheckboxv-modelisAllChackedclickhandleAllChange/span全选/全不选/span/litemplate v-ifdatalist.lengthli v-for(item,index) in datalist :keyitem.iddivinputtypecheckboxv-modelcheckList:valueitemchangehandleItemChange//divdivimg :srcitem.poster alt //divdivdiv{{item.title}}/divdiv stylecolor: red价格{{item.price}}/div/divdivbutton clickitem.number-- :disableitem.number1-/button{{item.number}}buttonclickitem.number:disableitem.numberitem.limit/button/divdivbutton clickhandleDel(index,item.id)删除/button/div/li/templateli v-else购物车空空如也/lilidiv总金额{{sum()}}/div/li/ul/divscriptvar obj {data() {return {isAllChecked: false,chackList: [],datalist: [{id: 1,title: 商品1,price: 10,number: 1,poster:https://gw.alicdn.com/bao/uploaded/i3/698598873/O1…wOdNnz2FPt9klYrZk_!!0-item_pic.jpg_300x300q90.jpg,limit: 5,},{id: 2,title: 商品2,price: 20,number: 2,poster: https://t8.baidu.com/it/u4043579294,4057690895fm…sec1692118800tacd1394b1a053e97133a40c0289677f9,limit: 6,},{id: 3,title: 商品3,price: 30,number: 3,poster:https://gw.alicdn.com/bao/uploaded/i3/698598873/O1…wOdNnz2FPt9klYrZk_!!0-item_pic.jpg_300x300q90.jpg,limit: 7,},],};},methods: {sum() {return this.checkList.reduce((total, item) total item.price * item.number,0);},handleDel(index, id) {this.datalist.splice(index, 1);//同步更新数组this.chackList this.chackList.filter((item) item.id ! id);this.handleItemChange();},handleAllChange() {this.chackList this.isAllChecked ? this.datalist : [];},handleItemChange() {if (this.datalist.length 0) {this.isAllChecked false;return;}this.isAllChecked this.checkList.length this.datalist.length;},},};var app Vue.createApp(obj).mount(#box);/script/body
/html
methods部分的方法如下
sum()方法用于计算购物车中商品的总金额。通过使用reduce()方法遍历checkList数组累加每个商品的价格乘以数量最终返回总金额。handleDel(index, id)方法用于处理删除商品的逻辑。通过使用splice()方法从datalist数组中删除指定索引的商品项然后使用filter()方法从checkList数组中过滤掉对应的商品项以保持两个数组的同步。最后调用handleItemChange()方法更新全选框的状态。handleAllChange()方法用于处理全选框的改变逻辑。当全选框被点击时如果全选框被选中则将datalist数组赋值给checkList数组表示所有商品被选中如果全选框未被选中则将checkList数组清空表示所有商品都未被选中。handleItemChange()方法用于处理商品项选择状态的改变逻辑。当商品项的选择状态发生改变时如果datalist数组为空则将全选框的状态设置为未选中否则将全选框的状态设置为checkList数组的长度与datalist数组长度相等时表示全选否则表示未全选。
