6.5【微信小程序全栈开发课程】记录页面（五）--隐藏显示文本框

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">
          
          <label v-if="record.add > 0">+{{record.add}}label>
          <label v-else-if="record.add == 0"> 0label>
          <label v-else>{{record.add}}label>
        div>
        
        <div class="mark">
          
          <label v-if="record.mark >= 0"> {{record.mark}}label>
          <label v-else>{{record.mark}}label>
        div>
        
        
        <div class="net" @click='changeEllipsis'>
          <label v-if="note">{{note}}label>
          <label v-else class="no-note">点击添加label>
        div>
        
        
        
        <label v-if="ellipsis">
          <div class="image" @click='cancel'><image class='img' src='/static/images/quxiao.png'>image>div>
        label>
        <label v-else>
          
          <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">
        
        <label v-if="record.note">修改label>
        <label v-else>添加label>
      button>
      
      <input v-model='note'
            class="input"
            maxlength='10'
            placeholder="最多输入10个字">
    div>
  div>
template>

4、测试效果

作者：猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

点击查看课程目录：微信小程序全栈开发课程目录