html计算选中框的总价格

最新推荐文章于 2024-07-21 17:58:14 发布

渊△隳

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量91

点赞数 2

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_61585709/article/details/138270436

版权

本文介绍了一个HTML页面，展示了如何使用Vue.js和axios库来创建一个动态选择商品并计算总价的应用。通过计算属性和reduce方法，实现了商品列表的选择功能和总价的实时更新。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算商品的价格</title>
	</head>
	<body>
		<div id="app">
		<label v-for="(item, index) in items" :key="index">  
		      <input type="checkbox" :value="item.value" v-model="selectedItems">  
		      {{ item.label }} - {{ item.price }} 元  
		</label>  
		
		 <p>已选中的总价: {{ totalPrice }} 元</p>  
		</div>
	
	</body>
		<script src="./js/vue.min.js"></script>
	<script src="./js/axios.min.js"></script>
	<script type="text/javascript">
		axios.defaults.withCredentials = true
		var vm = new Vue({
			el: '#app',
			data: {
				 items: [ // 商品或服务数组  
				        { value: 'item1', label: '商品1', price: 100 },  
				        { value: 'item2', label: '商品2', price: 200 },  
				        { value: 'item3', label: '商品3', price: 150 },  
				        // ... 更多商品  
				      ],  
				      selectedItems: [] // 存储被选中的商品值的数组 
			},
			mounted() {
				
				},
				computed: {  
				    // 计算属性，返回已选中的商品的总价  
				    totalPrice() {  
				      // 使用reduce方法计算总价  
				      return this.selectedItems.reduce((total, itemValue) => {  
				        const item = this.items.find(item => item.value === itemValue);  
				        if (item) {  
				          return total + item.price;  
				        }  
				        return total;  
				      }, 0);  
				    } }
						,
			methods: {  
				
						}
		})
	</script>
</html>