Vue组件实现评论区项目中的点赞功能

评论区点赞功能最常见的设计：

1. （1）存在有点赞和踩两个按钮。
2. （2）个人对单个视频只能选择点赞和踩之中的1个，且多次点击同一选项其累加数量只能加1。
3. （3）在选择完成后，其选项图标高亮、选项数量会加1。
4. （4）当尝试全点时会取消先选中的选项，使先选的选项高亮效果和其累加的数量转移至后选的选项。

---

        在组件的数据区每个评论的数据中需要有dianzanNum、caiNum、feedbackChose三个变量。前两者分别记录点赞和踩的现有数量；feedback默认值为0，且取值还有-1、1，规定0为默认无选中状态，-1为踩，1为点赞。其基本代码如下：

let comItem={
	imgSrc:this.imgSrc,
	nick:this.nick,
	say:this.say,
	sayTime:this.sayTime,
//以上为其他数据与点赞功能无关
	dianzanNum:0,
	caiNum:0,
	feedbackChose:0
}

        对于点赞和踩和它们相对应的数据都需要绑定一个class以实现单击后的高亮效果，feedback默认值为0，二者都没有效果。若点赞则将feedback值改为1以满足点赞区块中的class判定要求从而实现绑定效果，若点击踩效果同理。

<div class="feedback">
//点赞图标和数据
    <div 
     class="iconfont icon-dianzan feedbackItem"
     :class="{choseHighLight:item.feedbackChose===1}"
     @click="dianzan(item)"
    ></div>
	<div
     class="dianzanNum feedbackItem"
     :class="{choseHighLight:item.feedbackChose===1}"
    >({{item.dianzanNum}})</div>
//踩图标和数据
	<div
     class="iconfont icon-cai feedbackItem"
     :class="{choseHighLight:item.feedbackChose===-1}"
     @click="cai(item)"
    ></div>
	<div
     class="caiNum feedbackItem"
     :class="{choseHighLight:item.feedbackChose===-1}"
    >({{item.caiNum}})</div>
</div>

        点赞和踩设计单击事件，点击其中一个按钮，需要先判定当前的feedbackChose的值。若其值为0，则说明此次单击为第一次选择，则对应数量加1，且修改feedbackChose值为按钮对应值；若其值为另外一个选项所对应的值（1或-1），则说明在该次点击前已经选择了另外一项，则在对应数量加1的基础之上让另外的选项对应的值减1。至此点赞功能实现。其基本代码入下：

methods:{
    //点赞事件
    dianzan(item){
		if(item.feedbackChose===0){
			item.dianzanNum++;
		}
		if(item.feedbackChose===-1){
			item.dianzanNum++;
			item.caiNum--;
		}
		item.feedbackChose=1;
    },
    //踩事件
	cai(item){
		if(item.feedbackChose===0){
			item.caiNum++;
		}
		if(item.feedbackChose===1){
			item.caiNum++;
			item.dianzanNum--;
		}
		item.feedbackChose=-1;
	}
}

        注意在此部分代码中存有一个问题——同一事件里两个if里都有一句相同的代码，能不能拿出放在if外面？不可以取出，因为这里省略了feedbackChose与选择选项对应值相等的情况，若取出则会使设计（2）失效，从而出现不断点击同一按钮时点赞数量会不断增加。