uniapp 笔记第三天(修改数组对象的某个值、watch、computed)

一、给数组绑定点击事件

在之前的学习中都是给一些基本的元素（button、view）绑定了元素 ，但从来没给每个循环元素绑定过

    <view class="box1 flexA" v-for="(item,index) in list"  @click="getItem(item,index)">
            <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>

        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,
                }],

上面是一组基础数据 我们要实现点击哪个组 就拿到哪组的数据 记得给谁绑定谁就会生效，绑定了点击事件 记得要在methods里面定义哈

    getItem(item, index) {
                console.log(item, index);
    },

注意在循环中 我们是可以把循环的变量当做参数传给 methods里定义的方法里的, 注意传过去的参数 和接受的参数 要对应

<view class="box1 flexA" v-for="(item,index) in list"  @click="getItem(item,index)"></view>

    getItem(item, index) {
                console.log(item, index);
    },

可以看到从上面 点击哪个值 在控制台就可以打印出对应的值

二、修改数组对象中的某个值

这时候有一个场景哈 如果让你实现点击哪一项让当前的哪一项 的价钱加1你会怎么做

先来说一种错误写法 直接修改item里面的变量 让里面的价钱+1

getItem(item, index) {
                 item.price = item.price + 1
    },

本质上是可以这么修改的，但是不推荐哈，原因就是 传过来的对象和data里面定义的对象 指向的都是同一个地址，所以可以修改，如果你去定义一个简单的数据类型

// template
    <view @click="add(num)"> {{num}} </view>

//data:
    num: 0,

// methods
    add(num) {
         num=num+1
    },

如果你试过的话 你会发现这么修改简单数据类型并没有任何作用，原因是简单数据类型没有地址的概念 现在修改的num是一个简单数据类型传过来的 num 并非data里定义的 num 传过来的只是值而已

如果你想修改变量的话 直接赋值data里的变量即可

add(num) {
                this.num = this.num + 1
        },

如果你想直接修改 复杂数据类型里的某个值 也是同理，我们既然可以拿到上面的索引 直接根据索引找某个值就好了

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

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

三、切换变量小demo

<template>
    <view class="">
        <view class="box1 flexA" v-for="(item,index) in list" >
            <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>
    </view>
</template>

//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 你就可以根据索引拿到当前的状态赋值 做法就是取反哈！

toggleStatus(item, index) {
                this.list[index].status = !item.status
            },

四、计算选中的价格

我们还是通过上面定义的点击事件哈

1.先不考虑当前选没选中 先把所有的价钱算出来

错误写法：

toggleStatus(item, index) {
                this.list[index].status = !item.status
                this.list.forEach(it=>this.allPrice = it.price*it.num)
            },

这么写的话永远拿的都是 最后一次循环的值 每次都在替换 知道替换到最后一次 变成了128

正确写法：

                 this.list.forEach(it=> this.allPrice = this.allPrice + it.price*it.num)

这样写呢 就会把之前把之前计算过的带着再算一次

这样我们就可以拿到 所有的价钱哈

2.计算选中的

我们想要的并不是所有的总价钱 肯定是拿到选中的

第一种写法

toggleStatus(item, index) {
                this.list[index].status = !item.status
                
                // 第一种写法
                 this.allPrice = 0
                 this.list.forEach((it, idx) => {
                     if (it.status == true) {
                         this.allPrice = this.allPrice + it.price * it.num
                     }
                 })
                
            },

记得每次都赋值一下初始值哈，如果 你不知道什么原因 我建议你把赋值一行代码注释了 看看有没有什么影响

第二种写法

toggleStatus(item, index) {
                this.list[index].status = !item.status
                // 思路：把选中的数组过滤出来 再去计算
                 let arr = this.list.filter(item=> item.status) // 把选中的数组过滤出来 赋值给arr
                 let sum = 0 // 算出总价钱用的
                 arr.forEach(it=> sum = sum +  it.price * it.num) //计算价钱
                 this.allPrice = sum // 赋值给上面的变量
                 console.log('总价钱',sum,'当前选中的数组',arr);
                
            },

四、computed

computed 计算属性通常适合做一些映射、多对一时进行的操作，多对一：例如 一个数组中 判断每项算出一个结果出来

语法：

    computed: {
            getAllPrice() {
                return this.num+1
            }
        },

我们来看vue 给我提供的例子

{{ message.split('').reverse().join('') }}

上面呢 在一个差值表达式里调用了很多方法 如果说在上面操作中在加一些方法会不会感觉很凌乱，所以vue提供给我们了计算属性，它会实时根据data里的变量实时映射

    {{reverseStr}}

    computed: {
            reverseStr(){
                return this.str.split('').reverse().join('')
            }
        },

例如通过上面例子中计算总价格 我们就可以通过计算属性去实现它

    getAllPrice() {
                return this.list.filter(it => it.status).reduce((acc, it) => acc + it.price * it.num, 0)
            },

reduce 的执行过程

五、watch

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.watchAllPrice = 0
                    this.list.forEach((it, idx) => {
                        if (it.status == true) {
                            this.watchAllPrice = this.watchAllPrice + it.price * it.num
                        }
                    })                
                }
                
            }
},

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

总结 ：watch能做的computed都可以实现，如果说你发现了哪个好玩的功能点 可以考虑试一下这两个是否都能实现呢

扩展：watch和computed 的区别