vue分享一个简单的购物功能

最新推荐文章于 2021-07-03 10:59:42 发布

换日线°

最新推荐文章于 2021-07-03 10:59:42 发布

阅读量243

点赞数 1

分类专栏： VUE 文章标签： vue分享一个简单的购物功能

本文链接：https://blog.csdn.net/qq_43764578/article/details/102507911

版权

VUE 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

vue分享一个简单的购物功能

效果图如下所示在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table border="0" cellspacing="0" cellpadding="10">
				<thead>
					<tr>
						<th>选择</th>
						<th></th>
						<th>书籍名称</th>
						<th>出版日期</th>
						<th>价格</th>
						<th>购买数量</th>
						<th>库存</th>
						<th>操作</th>
					</tr>
					<tr v-for="(item,index) in array">
						<td><input @click="finxs(item.id)" v-model="item.chesin" type="checkbox" /></td>
						<td>{{index+1}}</td>
						<td>{{item.usnx}}</td>
						<td>{{item.sunx}}</td>
						<td>{{item.uxs}}</td>
						<td><button @click="usinx(index)">-</button>{{item.gouin}}<button @click="usixn(index)">+</button></td>
						<td>{{item.sinx}}</td>
						<td><button @click="ysinx(item.id)">{{item.ysinx}}</button></td>
					</tr>
				</thead>
			</table>
			<h3>全选:<input @click="csinx" type="checkbox" v-model="eisnx" /></h3>
			<h3>总价格:{{sxin}}</h3>
		</div>
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const obj = {
				array:[
					{
						chesin:false,id:'1',usnx:'书籍1',sunx:'出版日期1',uxs:'22',gouin:'1',sinx:'10',ysinx:'移除'
					},
					{
						chesin:false,id:'2',usnx:'书籍2',sunx:'出版日期2',uxs:'24',gouin:'5',sinx:'10',ysinx:'移除'
					},
					{
						chesin:false,id:'3',usnx:'书籍3',sunx:'出版日期3',uxs:'23',gouin:'2',sinx:'10',ysinx:'移除'
					},
					{
						chesin:false,id:'4',usnx:'书籍4',sunx:'出版日期4',uxs:'29',gouin:'4',sinx:'10',ysinx:'移除'
					},
					{
						chesin:false,id:'5',usnx:'书籍5',sunx:'出版日期5',uxs:'27',gouin:'3',sinx:'10',ysinx:'移除'
					},
				],
				eisnx:false
			}
			const app = new Vue({
				el:'#app',
				data:obj,
				computed:{
					sxin:function(){
						let num = 0;
						for(let i = 0;i < this.array.length;i++){
							if(this.array[i].chesin == true){
								num+=parseFloat(this.array[i].gouin * this.array[i].uxs)
							}
						}
						return num
					}
				},
				methods:{
					usinx:function(e){
						if(this.array[e].gouin > 0){
							this.array[e].gouin = --this.array[e].gouin
						}else{
							alert('已经不能再减了')
						}
					},
					usixn:function(e){
						console.log('点击了加')
						if(this.array[e].gouin < 10){
							this.array[e].gouin = ++this.array[e].gouin
						}else{
							alert('已经不能再加了')
						}
					},
					ysinx:function(e){
						for(let i = 0;i < this.array.length;i++){
							if(this.array[i].id == e){
								this.array.splice(i,1)
							}
						}
					},
					finxs:function(e){
						var binx=0;
						for(let i = 0;i<this.array.length;i++){
							if(this.array[i].id == e){
								this.array[i].chesin = !this.array[i].chesin
								for(var j = 0;j<this.array.length;j++){
									if(this.array[j].chesin == true){
										binx++
									}
								}
							}
						}
						if(binx == j){
							this.eisnx = true
						}else{
							this.eisnx = false
						}
					},
					csinx:function(e){
						if(this.eisnx == false){
							for(let i = 0;i<this.array.length;i++){
								if(this.array[i].chesin == false){
									this.eisnx = !this.eisnx
									this.array[i].chesin = !this.array[i].chesin
								}
							}
						}else{
							for(let i = 0;i<this.array.length;i++){
								if(this.array[i].chesin == true){
									this.eisnx = !this.eisnx
									this.array[i].chesin = !this.array[i].chesin
								}
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

有什么问题欢迎评论留言，我会及时回复你的

换日线°

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue分享一个简单的购物功能

vue分享一个简单的购物功能效果图如下所示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <table b...
复制链接

扫一扫

专栏目录