1、给循环数组绑定点击事件，并修改数组对象中的num值

之前的绑定点击事件都是给一些元素绑定，这次给循环元素进行绑定

<view class="box1 flexA" v-for="(item,index) in list" 
         @click="getItem(item,index)">           //给循环元素绑定了getItem()
			<view class="" @click="toggleStatus(item,index)">
				<image v-if="item.status==true" src="/static/yes.png" mode=""></image>
				<image v-else src="/static/noCur.png" mode=""></image>
			</view>
			<view class="" style="margin-left: 100rpx;">
				<view class="flexJ" style="width: 400rpx;">
					<view class="">商品名称 </view>
					<view class="">{{item.name}}</view>
				</view>
				<view class="flexJ" style="width: 400rpx;">
					<view class="">数量</view>
					<view class="">{{item.num}}</view>
				</view>
				<view class="flexJ" style="width: 400rpx;">
					<view class="">价钱</view>
					<view class="">¥{{item.price}}</view>
				</view>
			</view>
		</view>



		methods: {
			getItem(item, index) {
				console.log(item, index);
				// 1. 第一种写法 拿到list对应的当前项的值去+1
				this.list[index].num = this.list[index].num + 1 
				// 2. 第二种写法  拿到item 当前项的值去+1
				this.list[index].num = item.num + 1
			},

这时候每次点击每个商品，商品数量num就会加1，控制台会输出点击的项和索引

当然这是修改数组这种复杂数据类型中的值，因为复杂数据类型传过来的是十六进制地址，这种情况修改简单数据类型中的值是不起作用的

但是你在修改简单数据类型中的值时，可以直接赋值进行修改

			add(num) {
				this.num = this.num + 1
				// 错误写法 不要直接修改传过来的参数
				// num=num+1
			},

2、切换变量的显示与隐藏

购物车小案例

	<view class="" @click="toggleStatus(item,index)">   //点击事件，进行取反
		<image v-if="item.status==true" src="/static/yes.png" mode=""></image>
		<image v-else src="/static/noCur.png" mode=""></image>
	</view>

//data中的数据

 list: [{
			name: '奥特曼1',
			num: 6,
			price: 50,
			id: 1,
			status: false,
		}, {
			name: '奥特曼2',
			num: 5,
			price: 30,
			id: 2,
			status: false,
		}, {
			name: '奥特曼3',
			num: 8,
			price: 16,
			id: 3,
			status: false,
		}],

 购物车中的商品可以进行选中，选中就是对勾，没选中就是圆圈，如何达到这种效果呢，我们可以给数组中的每一项设置一个status，就可以通过给status进行取反，达到选中和取消

			toggleStatus(item, index) {
				console.log(item, index);
                //第一种写法
				this.list[index].status = !this.list[index].status
                //第二种写法
				this.list[index].status = !item.status
			}

可以利用索引，找到status进行取反，也可以直接对每一项的status取反

3、购物车小案例------计算选中商品的总价格

第一种写法

使用forEach遍历数组，加一个判断条件，选出status为ture的商品进行计算总价格

			toggleStatus(item, index) {
				//console.log(item, index);
				// this.list[index].status = !this.list[index].status
				this.list[index].status = !item.status
				
				this.allPrice = 0           //自己定义的总和，初始化
				this.list.forEach(item=>{
					if(item.status==true){
						return this.allPrice = this.allPrice + item.price * item.num
					}
				})
           }

 选中几个就会计算选中商品的总价格

第二种写法

利用filter()过滤器过滤出status为true的项，放到新数组arr中，然后进行计算总价格

			toggleStatus(item, index) {
				console.log(item, index);
				// this.list[index].status = !this.list[index].status
				this.list[index].status = !item.status

				let arr = this.list.filter(item=>item.status ==true)
				let sum = 0
				arr.forEach(item=>{
					return sum = sum + item.price * item.num
				})
				this.allPrice = sum
            }

4、购物车小案例-----computed计算选中商品的总价格

		computed:{
		        getAllPrice(){
					return this.list.filter(item=>item.status == true).reduce((acc,item)=>{return acc + item.price * item.num},0)
					
		        }   //acc为初始值
		},

reduce()方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

格式：

reduce(previousValue,currentValue)=>{ previousValue + currentValue,initialValue }

previousValue:上一个值

currentValue：现在的值

initialValue：初始值

reduce()执行过程

 5、watch监听器

监听简单数据类型

		watch: {
			num(newValue, oldValue) {
				console.log('num新值',newValue,'num旧值',oldValue);
				//this.watchNum = newValue + 999
			},
        }

 复杂数据类型的监听

		watch: {
			list:{
				deep:true,         //开启深度监听 专门对付复杂数据类型
				immediate:true,    //首次监听 一打开页面就想监听
				handler:function (newValue, oldValue){
					this.allPrice = 0
					this.list.forEach((item,index)=>{
						if(item.status == true){
							return this.allPrice = this.allPrice + item.price * item.num
						}
					})
				}
				
			}
		}

注：headler的函数格式不要写成箭头函数，否则拿不到当前的vue实例

        watch能做的computed都可以实现

具体参考：watch和computed的区别