(vue)vue实现点赞反馈功能:

// 第一步
<div class="fankui-box">
	 <img v-if="manyi == false" :src="alarmImg1" @click="insertAttr1" />
	 <img v-if="manyi == true" :src="alarmImg2" @click="insertAttr1" />
	 对结果满意
</div>
<div class="fankui-box">
	 <img v-if="bumanyi == false" :src="alarmImg3" @click="insertAttr2" />
	 <img v-if="bumanyi == true" :src="alarmImg4" @click="insertAttr2" />
	 对结果不满意
</div>

// 第二步
 data() {
   return {
     alarmImg1: require("@/assets/images/White.jpg"),
     alarmImg2: require("@/assets/images/Active.jpg"),
     alarmImg3: require("@/assets/images/UnWhite.jpg"),
     alarmImg4: require("@/assets/images/UnActive.jpg"),
     manyi: false,
     bumanyi: false,
   };
 },
 
// 第三步 
insertAttr1() {
  this.manyi = !this.manyi;
  this.bumanyi = false;
  if (this.manyi == true) {
    addFeedback({
      title: this.text,
      status: "1",
      note: "",
      type: "1",
      userName: this.loginName,
    }).then((res) => { 
    });
  }
},
insertAttr2() {
  this.bumanyi = !this.bumanyi;
  this.manyi = false;
  if (this.bumanyi == true) {
    addFeedback({
      title: this.text,
      status: "2",
      note: "",
      type: "1",
      userName: this.loginName,
    }).then((res) => { 
    });
  }
},

效果 :
在这里插入图片描述

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐