用vue脚手架写的简易留言板

举报
江咏之 发表于 2021/11/23 23:53:34 2021/11/23
【摘要】 1.配置安装好脚手架 2.留言板: <template> <div class="about"> <input type="text" v-model="val...

1.配置安装好脚手架
2.留言板:

<template>
  <div class="about">
    <input type="text" v-model="value" @keydown.enter="add" />
    <button @click="add">提交</button>
    <h1>{{value}}</h1>
    <h3>未完成({{listno.length}})</h3>
    <button @click="dels1(index)">全部删除</button>
    <table>
      <tr>
        <th>选项</th>
        <th>内容</th>
        <th>提交时间</th>
        <th>间隔时间</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in listno" :key="index">
        <td>
          <input type="checkbox" @click.prevent="changeYes($event,item,index)" />
        </td>
        <td>
          <span v-if="item.isShow">{{item.text}}</span>
          <input type="text" v-model="item.text" @blur="updateblur1(index)" v-else autofocus />
        </td>
        <td>{{item.times}}</td>
        <td>{{item.time | timeFilters}}</td>
        <td>
          <button @click="del1(index)">删除</button>
          <button @click="update1(index)">修改</button>
        </td>
      </tr>
    </table>
    <h3>已完成({{listyes.length}})</h3>
    <button @click="dels2(index)">全部删除</button>
    <table>
      <tr>
        <th>选项</th>
        <th>内容</th>
        <th>提交时间</th>
        <th>间隔时间</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in listyes" :key="index">
        <td>
          <input checked type="checkbox" name id @click.prevent="changeno($event,item,index)" />
        </td>
        <td>
          <span v-if="item.isShow">{{item.text}}</span>
          <input type="text" v-model="item.text" @blur="updateblur2(index)" v-else autofocus />
        </td>
        <td>{{item.times}}</td>
        <td>{{item.time |timeFilters}}</td>
        <td>
          <button @click="del2(index)">删除</button>
          <button @click="update2(index)">修改</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  filters: {
    timeFilters(ms) {
      let daystr = "";
      let date = new Date();
      let now = date.getTime();
      let rel = (now - ms) / 1000 / 60;
      // console.log(now/1000/60)
      // console.log(ms/1000/60)
      // console.log(rel)
      if (rel<5) {
        daystr = "刚刚";
      } else if (rel >= 5&&rel<10) {
        daystr = "5分钟前";
      } else if (rel >= 10&&rel<30) {
        daystr = "10分钟前";
      } else if (rel >= 30&&rel<40) {
        daystr = "30分钟前";
      }else if (rel >= 40&&rel<60) {
        daystr = "40分钟前";
      } else if (rel >= 60&&rel<120) {
        daystr = "1小时前";
      } else if (rel >= 120&&rel<300) {
        daystr = "2小时前";
      } else if (rel >= 300&&rel<1440) {
        daystr = "5小时前";
      } else if (rel >= 1440&&rel<2880) {
        daystr = "1天前";
      } else if (rel >= 2880&&rel<10080) {
        daystr = "2天前";
      } else if (rel >= 10080&&rel<43200) {
        daystr = "7天前";
      } else if (rel >= 43200) {
        daystr = "30天前";
      } 
      return daystr;
    }
  },
  data() {
    return {
      value: "",
      listyes: [],
      listno: [],
      
    };
  },
  created() {
    let listno = localStorage.listno;
    if (listno != undefined) {
      this.listno = JSON.parse(listno);
    }
    let listyes = localStorage.listyes;
    if (listyes != undefined) {
      this.listyes = JSON.parse(listyes);
    }
  },
  methods: {
    // 添加提交
    add() {
      if (this.value !== "") {
        this.listno.push({
          isShow: true,
          text: this.value,
          time: new Date().getTime(),
          times: new Date().toLocaleString().replace(/\//g, "-")
        });
        this.value = "";
        localStorage.listno = JSON.stringify(this.listno);
      }
    },
    updateblur1(index) {
      this.listno[index].isShow = true;
      localStorage.listno = JSON.stringify(this.listno);
    },
    updateblur2(index) {
      this.listyes[index].isShow = true;
      localStorage.listyes = JSON.stringify(this.listyes);
    },
    // 全部删除未完成
    dels1(index) {
      if (this.listno.length == 0) {
        alert("数据为零,删除不了");
      }
      this.listno.splice(index, this.listno.length);
      localStorage.listno = JSON.stringify(this.listno);
    },
    // 全部删除已完成
    dels2(index) {
      if (this.listyes.length == 0) {
        alert("数据为零,删除不了");
      }
      this.listyes.splice(index, this.listyes.length);
      localStorage.listyes = JSON.stringify(this.listyes);
    },
    // 删除未完成
    del1(index) {
      this.listno.splice(index, 1);
      localStorage.listno = JSON.stringify(this.listno);
    },
    // 修改未完成
    update1(index) {
      // let x = prompt("请修改");
      // console.log(x);
      // this.listno.splice(index, 1, x);
      this.listno[index].isShow = false;
      localStorage.listno = JSON.stringify(this.listno);
    },
    // 删除已完成
    del2(index) {
      this.listyes.splice(index, 1);
      localStorage.listyes = JSON.stringify(this.listyes);
    },
    // 修改已完成
    update2(index) {
      // let x = prompt("请修改");
      // console.log(x);
      // this.listyes.splice(index, 1, x);
      this.listyes[index].isShow = false;
      localStorage.listyes = JSON.stringify(this.listyes);
    },
    // 点击复选框显示到已完成
    changeYes(e, item, index) {
      // console.log(e.target.checked)
      var checked = e.target.checked;
      if (checked) {
        this.listyes.push(item);
        this.listno.splice(index, 1);
      }
      localStorage.listno = JSON.stringify(this.listno);
      localStorage.listyes = JSON.stringify(this.listyes);
    },
    // 点击显示到未完成
    changeno(e, item, index) {
      // console.log(e.target.checked)
      var checked = e.target.checked;
      if (!checked) {
        this.listno.push(item);
        this.listyes.splice(index, 1);
      }
      localStorage.listyes = JSON.stringify(this.listyes);
      localStorage.listno = JSON.stringify(this.listno);
    }
  }
};
</script>


<style scoped>
table {
  margin: 0 auto;
  /* width: 600px; */
}
td,th{
  width: 300px;
}
h1 {
  height: 20px;
}
li {
  list-style-type: none;
}
</style>


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224

文章来源: jiangwenxin.blog.csdn.net,作者:前端江太公,版权归原作者所有,如需转载,请联系作者。

原文链接:jiangwenxin.blog.csdn.net/article/details/106503425

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。