vue实现购物车功能.可以对购物车进行编辑、添加、删除等功能。
根据增加商品数量、减少商品数量、移除商品动态更新 总价格。
HTML部分
<code class="language-plaintext hljs"><div id="app" v-cloak> <table width="500" border="2"> <tr id="head" align="center"> <th>{<!-- -->{name}}</th> <th>{<!-- -->{price}}</th> <th>{<!-- -->{number}}</th> <th>{<!-- -->{Operation}}</th> </tr> <tr align="center" v-for="(item,index) in list" :style="item.number>0?'background-color:red':''"> <td>{<!-- -->{item.name}}</td> <td>￥:{<!-- -->{item.price}}</td> <td> <button @click="decrease(index)" style="display:none;" v-show="item.number >= 1">-</button> <span>{<!-- -->{item.number}}</span> <button @click="increase(index)">+</button> </td> <td> <button @click="editor(index)">编辑</button> <button @click="deletes(index)">删除</button> </td> </tr> <tr align="center"> <td></td> <td>总价格：{<!-- -->{totalPrice}}￥</td> <td>总数量：{<!-- -->{totalNum}}</td> <td></td> </tr> </table> <div id="addBox"> <button @click="add">{<!-- -->{message}}</button> <form v-show="isShow" @submit.prevent="insert"> 商品名称：<input v-bind:type="type" v-model.name="names" placeholder="商品名称"> 价格 : <input v-bind:type="typeNumber" v-model.number="num"> <button>添加</button> </form> <form v-show="inShow" @submit.prevent="editors(index)"> 商品名称：<input v-bind:type="type" v-model="input_names" placeholder="商品名称"> 价格 : <input v-bind:type="typeNumber" v-model.number="input_num"> <button>确认编辑</button> </form> </div> </div></code>
script部分(Vue写法)
<code class="language-plaintext hljs"><script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script> <script> Vue.createApp({ data() { return { name: '名称'， names: '', price: '价格', prices: '', number: '数量', Operation: '操作', type: 'text', typeNumber: 'number', isShow: false, inShow: false, message: '添加商品', num: 0, editorname: '编辑', // 基础数据 list: [{ name: '三相之力', price: 3000, number: 1, }, { name: '无尽之刃', price: 3400, number: 1, }], index:null } }, computed:{ // 总价格 totalPrice() { let num = 0; this.list.forEach(element => { num += (element.price * element.number) }); return num }, // 总数量 totalNum() { let num = 0; this.list.forEach(element => { num += element.number }); return num }, }, methods: { // 添加商品 add() { this.isShow = !this.isShow;//布尔值运算显示隐藏 if (this.isShow) { this.message = '关闭添加商品'; } else { this.message = '添加商品'; }; }, insert() { if (this.names == '') { alert('请填写商品') } else { this.list.push({ name: this.names, price: this.num, number: 1 }) this.isShow = !this.isShow; this.names='' this.num='' }; }, // 减少数量 decrease(i) { this.list[i].number-- if (this.list[i].number <= 0 && confirm("是否删除")) { this.list.splice(i, 1) }; }, // 添加数量 increase(i) { this.list[i].number++ }, // 删除商品 deletes(i) { this.list.splice(i, 1) }, // 编辑商品 editor(i) { this.inShow = !this.inShow; if (this.isShow) { this.editorname = '编辑'; }; this.input_names = this.list[i].name; this.input_num = this.list[i].price; this.index=i; }, editors() { this.list[this.index].name=this.input_names this.list[this.index].price=this.input_num; this.inShow = !this.inShow; }, }, }).mount('#app') </script></code>
整体写发与js差不多,只不过vue他知识改变了数据，所用的也都是Vue的一些基本代码
vue基础学习:
vue模板语法
模板语法
1.使用双花括号( {{}} )对变量输出,内部可以写简单的表达式用于对数据的处理
一个花括号中只能输出一个变量
<b>{{ name }}</b>
2.v-text
相当于js的innerText,
3.v-html
相当于js的innerHTML
4.v-bind
动态绑定属性,简写是冒号( : )
更多使用请看Vue官方
菜鸟教程:Vue.js 安装 | 菜鸟教程
node.js:下载 | Node.js 中文网
