Uniapp-（修改数组对象某个值、点击事件、计算属性、监听、深度监听）

1.数组绑定点击事件

点击事件就是“click”和用于绑定事件的v-on使用，可以做到修改数组对象中的某个元素，v-on可以缩写为@符号。

<view class="box1 flexA" v-for="(item,index) in commodity">

			<view class="" @click="dianji(item,index)">
				<image v-if="item.stutas==true" src="/static/yes.png"></image>
				<image v-else src="/static/noCur.png"></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>
		
</template>

<script>
	export default {
		data() {
			return {
				// num:0,
				commodity: [{
						name: '德玛',
						num: 2,
						price: 120,
						stutas: false,
					},
					{
						name: '皇子',
						num: 4,
						price: 20,
						stutas: false,
					},
					{
						name: '赵信',
						num: 6,
						price: 40,
						stutas: false,
					}
				],
			}
		},

data里面是一组数据 ，我们要实现点击那组数据， 就得到那组数据 ，绑定给谁谁就生效，绑定完成点击事件需要在methods里定义。

methods: {
			dianji(item, index) {
                console.log(item, index);
				this.commodity[index].stutas = !this.commodity[index].stutas
			},

2.修改某个值 

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

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

钥匙你想修改 复杂数据类型里的某个值，我们可以拿到想要修改值的索引，然后根据索引找想要修改的值就可以。

dianji(item, index) {
				console.log(item, index);
				 this.commodity[index].price = this.commodity[index].price + 1 
			},

3.计算属性computed

这个属性的应用场景很多，只要有计算的地方都用的到。比如购物车结算金额。

代码：

<view class="box1 flexA" v-for="(item,index) in commodity">

			<view class="" @click="dianji(item,index)">
				<image v-if="item.stutas==true" src="/static/yes.png"></image>
				<image v-else src="/static/noCur.png"></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>
		
</template>

<script>
	export default {
		data() {
			return {
				// num:0,
				commodity: [{
						name: '德玛',
						num: 2,
						price: 120,
						stutas: false,
					},
					{
						name: '皇子',
						num: 4,
						price: 20,
						stutas: false,
					},
					{
						name: '赵信',
						num: 6,
						price: 40,
						stutas: false,
					}
				],
			}
		},

我想要知道这些商品加一起用多少钱，这个时候就可以用计算属性computed，它于methods是同级别的。

		computed: {
			Price() {
				return this.commodity.filter(item=>item.stutas).reduce((acc,item)=>acc + item.price * item.num,0)
				
			}
		},

用return动态的返回值，reduc方法中的acc是初始值，也就是末尾写的0，具体可以搜索相关知识。

4.监听属性watch

监听很容理解，例如：你想知道狗子的生活状态，那你就监听它，这样你就可以得到想要的数据，在代码里的监听也是如此，监听data中的数据变化，想监听谁就吧它的键写在watch下。

代码：

watch: {
			num(newValue, oldValue) {
				console.log('num新值：', newValue, 'num旧值', oldValue);
			},
}，

我这里使用watch属性监听上面的数组对象中的num值，可以得到num值变换前后的值

深度监听deep：true

有时会遇到因为数据层次多而监听不到数据变化的问题，深度监听就能直接解决这个问题。

data() {
return {
     ruleList:[{ title: '1' ,arr:[{name:'计算机'}]},
        { title: '2', arr:[{name:'游戏机'}] },
        { title: '3', arr:[{name:'飞机'}] }]
}
}, 
watch: {
    //监听的数据
    ruleList: {
      handler(newValue) {
        console.log('深度监听')
      },
      deep: true, //开启深度监听   默认为false
    },
  },