用vue编写一个备忘录！（白嫖代码请给一个关注谢谢）

原创 已于 2024-04-27 19:25:19 修改 · 660 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #html5 #css #javascript

于 2024-04-27 19:18:31 首次发布
这篇文章详细介绍了使用Vue.js构建的一个简易记事本应用，包括HTML结构、CSS样式和Vue实例中的数据绑定、方法处理。展示了如何创建输入框、列表项、添加和删除任务功能以及底部统计和清空功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="./css/index.css" />

<title>小帅记事本</title>

</head>

<body>

<!-- 主体区域 -->

<section id="app">

  <!-- 输入框 -->

  <header class="header">

    <h1>小帅记事本</h1>

    <input placeholder="请输入任务" class="new-todo" v-model="contain"/>

    <button class="add" @click="add()">添加任务</button>

  </header>

  <!-- 列表区域 -->

  <section class="main">

    <ul class="todo-list">

      <li class="todo" v-for="(item,index) in list" :key="item.id">

        <div class="view">

          <span class="index">{{ index+1 }}</span> <label>{{ item.name }}</label>

          <button class="destroy" @click="del(item.id)"></button>

        </div>

      </li>

    </ul>

  </section>

  <!-- 统计和清空 如果没有任务，底部隐藏-->

  <footer class="footer" v-show="list.length>0">

    <!-- 统计 -->

    <span class="todo-count">合 计:<strong> {{ list.length }}</strong></span>

    <!-- 清空 -->

    <button class="clear-completed" @click="none">

      清空任务

    </button>

  </footer>

</section>

<!-- 底部 -->

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>

  const app = new Vue({

    el: '#app',

    data: {

      list:[

        { id:1,name:"跑步一公里"},

        { id:2,name:"跳绳一百下"},

        { id:3,name:"俯卧撑两百下"}

      ],

      contain:""

    },

    methods:{

      del(id){

        this.list= this.list.filter(item => item.id!==id)

      },

      add(){

        if(this.contain.trim()==="") {

          return alert("mer~~不能输入空格呦！")  

        }

        this.list.unshift({

          id:+new Date(),

          name:this.contain

        })

        this.contain=""

      },

      none(){

        this.list=[]

      }

    }

  })

</script>

</body>

</html>

以下是css文件里的代码！！！！！！！！！！！！！！！！！！！

html,

body {

  margin: 0;

  padding: 0;

}

body {

  background: #fff;

}

button {

  margin: 0;

  padding: 0;

  border: 0;

  background: none;

  font-size: 100%;

  vertical-align: baseline;

  font-family: inherit;

  font-weight: inherit;

  color: inherit;

  -webkit-appearance: none;

  appearance: none;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

body {

  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;

  line-height: 1.4em;

  background: #f5f5f5;

  color: #4d4d4d;

  min-width: 230px;

  max-width: 550px;

  margin: 0 auto;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 300;

}

:focus {

  outline: 0;

}

.hidden {

  display: none;

}

#app {

  background: #fff;

  margin: 180px 0 40px 0;

  padding: 15px;

  position: relative;

  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);

}

#app .header input {

  border: 2px solid rgba(175, 47, 47, 0.8);

  border-radius: 10px;

}

#app .add {

  position: absolute;

  right: 15px;

  top: 15px;

  height: 68px;

  width: 140px;

  text-align: center;

  background-color: rgba(175, 47, 47, 0.8);

  color: #fff;

  cursor: pointer;

  font-size: 18px;

  border-radius: 0 10px 10px 0;

}

#app input::-webkit-input-placeholder {

  font-style: italic;

  font-weight: 300;

  color: #e6e6e6;

}

#app input::-moz-placeholder {

  font-style: italic;

  font-weight: 300;

  color: #e6e6e6;

}

#app input::input-placeholder {

  font-style: italic;

  font-weight: 300;

  color: gray;

}

#app h1 {

  position: absolute;

  top: -120px;

  width: 100%;

  left: 50%;

  transform: translateX(-50%);

  font-size: 60px;

  font-weight: 100;

  text-align: center;

  color: rgba(175, 47, 47, 0.8);

  -webkit-text-rendering: optimizeLegibility;

  -moz-text-rendering: optimizeLegibility;

  text-rendering: optimizeLegibility;

}

.new-todo,

.edit {

  position: relative;

  margin: 0;

  width: 100%;

  font-size: 24px;

  font-family: inherit;

  font-weight: inherit;

  line-height: 1.4em;

  border: 0;

  color: inherit;

  padding: 6px;

  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);

  box-sizing: border-box;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

.new-todo {

  padding: 16px;

  border: none;

  background: rgba(0, 0, 0, 0.003);

  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);

}

.main {

  position: relative;

  z-index: 2;

}

.todo-list {

  margin: 0;

  padding: 0;

  list-style: none;

  overflow: hidden;

}

.todo-list li {

  position: relative;

  font-size: 24px;

  height: 60px;

  box-sizing: border-box;

  border-bottom: 1px solid #e6e6e6;

}

.todo-list li:last-child {

  border-bottom: none;

}

.todo-list .view .index {

  position: absolute;

  color: gray;

  left: 10px;

  top: 20px;

  font-size: 22px;

}

.todo-list li .toggle {

  text-align: center;

  width: 40px;

  /* auto, since non-WebKit browsers doesn't support input styling */

  height: auto;

  position: absolute;

  top: 0;

  bottom: 0;

  margin: auto 0;

  border: none; /* Mobile Safari */

  -webkit-appearance: none;

  appearance: none;

}

.todo-list li .toggle {

  opacity: 0;

}

.todo-list li .toggle + label {

  /*

    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433

    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/

  */

  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');

  background-repeat: no-repeat;

  background-position: center left;

}

.todo-list li .toggle:checked + label {

  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');

}

.todo-list li label {

  word-break: break-all;

  padding: 15px 15px 15px 60px;

  display: block;

  line-height: 1.2;

  transition: color 0.4s;

}

.todo-list li.completed label {

  color: #d9d9d9;

  text-decoration: line-through;

}

.todo-list li .destroy {

  display: none;

  position: absolute;

  top: 0;

  right: 10px;

  bottom: 0;

  width: 40px;

  height: 40px;

  margin: auto 0;

  font-size: 30px;

  color: #cc9a9a;

  margin-bottom: 11px;

  transition: color 0.2s ease-out;

}

.todo-list li .destroy:hover {

  color: #af5b5e;

}

.todo-list li .destroy:after {

  content: '×';

}

.todo-list li:hover .destroy {

  display: block;

}

.todo-list li .edit {

  display: none;

}

.todo-list li.editing:last-child {

  margin-bottom: -1px;

}

.footer {

  color: #777;

  padding: 10px 15px;

  height: 20px;

  text-align: center;

  border-top: 1px solid #e6e6e6;

}

.footer:before {

  content: '';

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  height: 50px;

  overflow: hidden;

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,

    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,

    0 17px 2px -6px rgba(0, 0, 0, 0.2);

}

.todo-count {

  float: left;

  text-align: left;

}

.todo-count strong {

  font-weight: 300;

}

.filters {

  margin: 0;

  padding: 0;

  list-style: none;

  position: absolute;

  right: 0;

  left: 0;

}

.filters li {

  display: inline;

}

.filters li a {

  color: inherit;

  margin: 3px;

  padding: 3px 7px;

  text-decoration: none;

  border: 1px solid transparent;

  border-radius: 3px;

}

.filters li a:hover {

  border-color: rgba(175, 47, 47, 0.1);

}

.filters li a.selected {

  border-color: rgba(175, 47, 47, 0.2);

}

.clear-completed,

html .clear-completed:active {

  float: right;

  position: relative;

  line-height: 20px;

  text-decoration: none;

  cursor: pointer;

}

.clear-completed:hover {

  text-decoration: underline;

}

.info {

  margin: 50px auto 0;

  color: #bfbfbf;

  font-size: 15px;

  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

  text-align: center;

}

.info p {

  line-height: 1;

}

.info a {

  color: inherit;

  text-decoration: none;

  font-weight: 400;

}

.info a:hover {

  text-decoration: underline;

}

/*

  Hack to remove background from Mobile Safari.

  Can't use it globally since it destroys checkboxes in Firefox

*/

@media screen and (-webkit-min-device-pixel-ratio: 0) {

  .toggle-all,

  .todo-list li .toggle {

    background: none;

  }

  .todo-list li .toggle {

    height: 40px;

  }

}

@media (max-width: 430px) {

  .footer {

    height: 50px;

  }

  .filters {

    bottom: 10px;

  }

}

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上全栈创享家

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值