mpvue惨案-mpvue不支持复杂运算,也不支持v-if="对象.属性",v-if只能跟简单类型

惨案1、动态更换图片

原计划:代码如下。因为这个template是json对象weekly的展示,这两个点击事件就是更新weekly对象中的指定字段的值,从而达到图片的切换。实际看到的效果就是,第一次触发两个点击事件中的一个,是会自动更换图片的,但是第二次再触发就不会更换图片了,方式是正常调用了的,值也是对的。

<img v-if="weekly.has_love_count" class="oper-share" src="/static/images/icon/share.png" @tap="addShare"/>
<img v-else class="oper-share" src="/static/images/icon/share-anti.png" @tap="addShare"/>
<img v-if="weekly.has_attention_count" class="oper-collect" src="/static/images/icon/collection.png" @tap="addCollect"/>
<img v-else class="oper-collect" src="/static/images/icon/collection-anti.png" @tap="addCollect"/>


  export default {
    data(){
      return{
        weekly: {},
        isShare: false,
        isCollect: false
      }
    },

    methods:{
      addShare(){
        this.weekly.love_count++
        this.weekly.has_love_count = true
        console.log("this.weekly.has_attention_count",this.weekly.has_attention_count)
      },
      addCollect(){
        this.weekly.attention_count++
        this.weekly.has_attention_count = true
        console.log("this.weekly.has_love_count",this.weekly.has_love_count)
      }
    }
 }

解决:后查看mpvue的官网,看到说mpvue暂时不支持复杂的运算,如是换了一种思路,图片的更换直接从字段中取,而不是从对象中的字段取值来判断。结果达到了逾期的效果,两个事件都会更换对应的图片,如是有点怀疑,可能真的是因为v-if判断值复杂的原因,才导致没有达到预期的效果。

<img v-if="isShare" class="oper-share" src="/static/images/icon/share.png" @tap="addShare"/>
<img v-else class="oper-share" src="/static/images/icon/share-anti.png" @tap="addShare"/>
<img v-if="isCollect" class="oper-collect" src="/static/images/icon/collection.png" @tap="addCollect"/>
<img v-else class="oper-collect" src="/static/images/icon/collection-anti.png" @tap="addCollect"/>

  export default {
    data(){
      return{
        weekly: {},
        isShare: false,
        isCollect: false
      }
    },
    methods:{
      addShare(){
        this.weekly.love_count++
        // this.weekly.has_love_count = true
        this.isShare = true
        console.log("this.weekly.has_attention_count",this.weekly.has_attention_count)
      },
      addCollect(){
        this.weekly.attention_count++
        // this.weekly.has_attention_count = true
        this.isCollect = true
        console.log("this.weekly.has_love_count",this.weekly.has_love_count)
      }
    }
  }

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值