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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_23035335/article/details/100751831

惨案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)
      }
    }
  }