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值变换前后的值
