Vue基础案例（水果搜索，购物车，todolist,留言板，跑马灯)_创建html在vue中添加 goodslist 数据如下 id name price num add-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_55734030/article/details/126977324

Vue基础案例（水果搜索，购物车，todolist，留言板，跑马灯)

01.水果搜索案例

思路以及运用知识点

通过computed计算 keyword与list ，算出findlist
如果list中的某一项包含 keyword关键字，在flist保留该项
⭐includes检测是否包含某个字符串， indexOf()不等于-1。如果遍历的元素包含keyword，返回true保留当前的item，当通过indexOf查字符串时候返回-1 代表找不到
⭐ filter()过滤数组，返回包含了符合条件的所有元素组成的数组
trim() 移除字符串两端的空格
箭头函数

1.把function去掉
2.在()与{}添加箭头 =>
3.若有返回值 {}和return还可以省略
4.若参数只有一个，()还可以省略
5.普通函数也可以改写成箭头函数需要把这个名字赋值给一个变量，调用的时候还是函数名();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水果搜索</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>水果搜索功能的实现</h2>
			<input type="text" v-model="keyword">
			<div v-for="(item,index) in findlist" :key="index">{
  {item}}</div>
		</div>
		<script>
			new Vue({
     
				el: "#app",
				data() {
     
					return {
     
						keyword: "",
						list: ["苹果", "枇杷", "山楂", "梨", "樱桃", "李子", "草莓", "橘子", "柚子", "西瓜", "香蕉", "枣", "葡萄", "蓝莓", "芒果",
							"菠萝", "枸杞", "番石榴", "山竹", "椰子", "槟榔", "榴莲", "荔枝", "龙眼", "火龙果", "桑葚", "柿子", "杨梅"
						]
					}
				},
				computed: {
     
					findlist() {
     
						if (this.keyword.trim() === "") {
     
							return this.list;
						} else {
     
							var temp = this.list.filter(item => {
     
								if (item.indexOf(this.keyword) != -1) {
     
									return true;
								} else {
     
									return false;
								}

							});
							return temp;

						}
					}
				},

			})
		</script>
	</body>
</html>

02.购物车

思路以及运用知识点

实现随着数量价格增加总价改变，以及全选功能
通过totalPrice实现价格累加 totalCount实现数量累加
运用了forEach遍历，当元素值sel为true才累加
⭐watch监听复选框的改变
⭐every()检测数组所有元素是否都符合指定条件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<table border