1、添加data变量
编辑RecordList.vue文件的data函数，添加三个变量：ellipsis、note、src
其中ellipsis用来控制添加或者编辑文本框显示、note是添加或者编辑文本框中的文本（note默认为记录数据里面的备注）、src是编辑按钮图片链接
data () { return { create_time:formatTime(new Date(this.record.create_time)), ellipsis: false, note:this.record.note, src:"/static/images/bianji.png" } },
2、添加方法
在标签中创建methods函数，添加changeEllipsis、cancel方法
changeEllipsis方法用来修改变量ellipsis，从而控制文本框是否显示
cancel用来修改ellipsis，同时将note重置为修改前的状态
//参考数据，无需粘贴 //data () { //... //}, //需要添加的部分，不要忘记在以上一行添加逗号隔开 methods:{ // ellipsis为true时，显示文本框；为false隐藏文本框 changeEllipsis () { this.ellipsis = !this.ellipsis }, // 点击取消按钮时，要改变ellipsis，同时将note重置为修改前的状态 cancel () { this.ellipsis = !this.ellipsis this.note = this.record.note }, }
3、添加页面代码
编辑RecordList.vue文件的template部分
<template> <div class="book-card"> <div class="table" width="98%"> <div class="tr"> <!-- 时间 --> <div class="date">{{create_time}}</div> <!-- 分数 --> <div class="busi"> <!-- 为了页面样式比较整齐，如果当前分数>0，在前面加一个+号; 当前分数=0在前面加一个空格--> <label v-if="record.add > 0">+{{record.add}}</label> <label v-else-if="record.add == 0"> 0</label> <label v-else>{{record.add}}</label> </div> <!-- 最后得分 --> <div class="mark"> <!-- 如果当前分数大于0，在分数的前面加一个空格，为了页面样式比较整齐 --> <label v-if="record.mark >= 0"> {{record.mark}}</label> <label v-else>{{record.mark}}</label> </div> <!-- 备注 --> <!-- changeEllipsis方法用来控制ellipsis变量为false或者为true --> <div class="net" @click='changeEllipsis'> <label v-if="note">{{note}}</label> <label v-else class="no-note">点击添加</label> </div> <!-- 编辑或者取消按钮 --> <!-- 当点击添加或者编辑按钮，显示文本框，按钮变成取消按钮 --> <!-- 点击取消按钮，触发cancel方法，隐藏文本框，按钮重新变成添加或者编辑按钮 --> <label v-if="ellipsis"> <div class="image" @click='cancel'><image class='img' src='/static/images/quxiao.png'></image></div> </label> <label v-else> <!-- note指的记录备注，默认是record.note。如果重新编辑需要根据编辑的文本实时显示，所以将note做成了变量，src变量用到了三元函数。当文本框中有文字，显示编辑按钮；当文本框中没有文字，不显示按钮 --> <div class="image" @click='changeEllipsis'><image class='img' :src="note? src : ''"></image></div> </label> </div> </div> <!-- 点击添加或者编辑按钮显示的文本框 --> <div class="hide" v-if="ellipsis"> <button class="btn"> <!-- 当record记录有备注字段不为空，按钮显示为「修改」；当备注字段为空，按钮显示为「添加」 --> <label v-if="record.note">修改</label> <label v-else>添加</label> </button> <!-- input文本框绑定了note变量，在编辑文本框时，显示的备注文字，会根据文本框中编辑的文字变化 --> <input v-model='note' class="input" maxlength='10' placeholder="最多输入10个字"> </div> </div> </template>
4、测试效果
