Vue之点击收藏与取消收藏

思路

通过条件运算符，给定图片一个属性，点击改变属性值

• 未点击时，图标灰，默认值false
• 点击时，图标亮，改变为true
• 再次点击时，图标灰，改为false

示例

<div>
	<img :src="isActive===true?'static/image/c_icon1.png':'static/image/c_icon.png'" 
		 @click="gostore">
</div>

methods: {
	gostore(){ //收藏
      const that=this;
      if(that.isActive === false){
		//axios请求
        that.isActive = true
        console.log("aa")
      }else if(that.isActive === true){
		//axios请求
        that.isActive = false
        console.log("bb")
      }

    },
}