vue2.0 computer计算水果搜索与案例购物车

最新推荐文章于 2024-05-20 19:59:47 发布

敲代码的小吉米

最新推荐文章于 2024-05-20 19:59:47 发布

阅读量969

点赞数 3

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/promise466/article/details/127025758

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

computer计算：从现有数据计算出新的数据（只读）

水果搜索思路：

// 通过计算 key与list算出flist

// 如果list中的某一项包含key关键词 flist保留该项

// includes检测是否包含某个字符串 indexof（）不等于-1

// filter过滤数组

// trim移除字符串两端的空格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>搜索水果</h1>
			<input type="text" v-model="key">
			<div v-for="(item,index) in flist" :key="index">{{item}}</div>
		</div>
		<script>
			new Vue({
				el:"#app",
				data(){
					return{
						key:"",
						list:["苹果","枇杷","山楂","梨","樱桃","李子","草莓","橘子","柚子","西瓜","香蕉","枣","葡萄","蓝莓","芒果","菠萝","枸杞","番石榴","山竹","椰子","槟榔","榴莲","荔枝","龙眼","火龙果","桑葚","柿子","杨梅"]
					}
				},
				computed:{
					flist(){
						if(this.key.trim()==""){//判断输入框的内容为空时返回list 数据
							return this.list;
						}else{
							var temp=this.list.filter(item=>{
								// 如果遍历的元素包含key，返回true保留当前的item
								// 当通过indexOf
								// 如果查找不到input内容 
								if(item.indexOf(this.key)!=-1){
									return true;
								}else{
									return false;
								}
							});
							return temp;
						}
							
						}
					}
			})
			// 通过计算 key与list算出flist
			// 如果list中的某一项包含key关键词 flist保留该项
			// includes检测是否包含某个字符串  indexof（）不等于-1
			// filter过滤数组
			// trim移除字符串两端的空格
		</script>
	</body>
</html>

computer计算购物车功能

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../js/vue.js"></script>
	<script src="../js/step.js"></script>
</head>

<body>
	<div id="app">
		<table border="1">
			<tr>
				<th> <input type="checkbox" v-model="all" @change="changeHd()"></th>
				<th>商品名称</th>
				<th>价格</th>
				<th>数量</th>
			</tr>
			<tr v-for="item in goods" :key="item.name">
				<!-- 选项框 -->
				<td><input type="checkbox" v-model="item.sel" @change="itemHd"></td>
				<!-- 商品 -->
				<td>{{item.name}}</td>
				<!-- 价格 -->
				<td>{{item.price}}</td>
				<!-- 数量 -->
				<td>
					<step v-model="item.num"></step>
				</td>
			</tr>
		</table>
		<p>
			总价：{{totalPrice}}，总{{totalCount}}件
		</p>
	</div>
	<script>
		new Vue({
			el: "#app",
			components: { step },
			methods: {
				// 点击全选 所有商品选中
				changeHd() {
					this.goods.forEach(item => item.sel = this.all)
				},
				// 所有的单个商品被选中是 全选框也被选中
				itemHd() {
					// every当所有为true时返回true  一个为false时返回false
					this.all = this.goods.every(item => item.sel);
				}
			},
			// 总价格
			computed: {
				totalPrice: function () {
					// 返回的默认总价
					var n = 0;
					this.goods.forEach(item => {
						// 累加数量*加载(如果当前元素sel值为true才累加)
						if (item.sel) {
							n += item.price * item.num;
						}

					})
					// 返回
					return n;
				},
				// 总数量
				totalCount: function () {
					// 返回的默总数
					var n = 0;
					this.goods.forEach(item => {
						// 数量累加
						if (item.sel) {
							n += item.num;
						}
					})
					// 返回
					return n;
				},
			},
			data() {
				return {
					goods: [{
						name: "javascript入门",
						price: 20,
						num: 1,
						sel: true,
					},
					{
						name: "vue实战",
						price: 17.5,
						num: 2,
						sel: false
					}
					]
				}
			}
			
		})
	</script>
</body>

</html>