用vue.js按照例子编写一个HTML页面1.1.html,计算购物车商品总价

当你想使用Vue.js在HTML页面中创建一个计算购物车商品总价的例子，可以参考以下步骤。首先，在`1.1.html`文件中，我们需要设置基本的HTML结构，并引入Vue.js库。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue购物车示例</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style> /* 可选样式 */ .cart-item { border-bottom: 1px solid #ccc; padding: 10px; } </style> </head> <body> <div id="app"> <h1>购物车</h1> <ul class="cart-items">  <li v-for="(item, index) in cartItems" :key="index"> {{ item.name }} - {{ item.price }} <button @click="removeItem(index)">删除</button>  <p>总价: {{ calculateTotal(item.price) }}</p> </li> </ul>  <input type="text" v-model="newItemName" placeholder="添加商品名称"> <input type="number" v-model.number="newItemPrice" placeholder="添加商品价格"> <button @click="addItem">添加到购物车</button> <hr> <p>总计: {{ totalPrice }}</p> </div> <script> new Vue({ el: '#app', data: { cartItems: [ { name: '苹果', price: 5 }, { name: '香蕉', price: 3 }, // 更多商品... ], newItemName: '', newItemPrice: 0, totalPrice: 0 }, methods: { addItem() { if (this.newItemName && this.newItemPrice > 0) { this.cartItems.push({ name: this.newItemName, price: this.newItemPrice }); this.newItemName = ''; this.newItemPrice = 0; } }, removeItem(index) { this.cartItems.splice(index, 1); this.updateTotal(); }, calculateTotal(price) { return price * 1; // 这里只是一个简单的乘法示例，实际应用中可能会从服务器获取实时价格或做其他处理 }, updateTotal() { this.totalPrice = this.cartItems.reduce((total, item) => total + item.price, 0); } } }); </script> </body> </html> ``` 在这个例子中，我们创建了一个Vue实例，数据包括购物车列表、新商品名和价，以及总价。通过`v-model`指令双向绑定输入字段的值，然后使用`methods`对象定义方法来添加、删除商品并更新总价。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通