vue记事本小案例

最新推荐文章于 2025-12-07 09:58:49 发布

原创最新推荐文章于 2025-12-07 09:58:49 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这是一个使用Vue.js创建的简单记事本应用。HTML结构包含输入框和列表，用于添加和删除条目。Vue实例绑定了数据和方法，如`add`用于添加记事，`remove`用于删除，`clear`用于清空所有记事。应用具有响应式布局和基本的样式设计。

vue和HTML结构

<!DOCTYPE html>
<html lang="zh-cn">

<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>
  <div id="app">
    <h2>记事本</h2>
    <div class="main">
      <input type="text" v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入内容！" />
      <ul>
        <li>
          <!-- 使用v-for更具数据生成列表结构 -->
          <div class="content" v-for="(item,index) in list">
            <span >{{index+1}}.{{item}}</span>   <!--用{{index+1}}显示数据的索引以及数据的每一项-->
            <button @click="remove(index)">❌</button> 
          </div>
          
        </li>
      </ul>
      <p class="empty">空空如也...</p>
    </div>
    <div class="bottom">
      <span>合计:{{list.length}}</span>
      <span @click="clear()">清空</span>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        list: ['吃饭','写代码','睡觉'],
        

      },
      methods: {
        add () {//添加数据的方法，使用v-on和keyup.enter事件绑定
          this.list.push(this.inputValue)  
        },
        remove(index){//删除数据方法
          this.list.splice(index,1);
        },
        clear(){
          this.list=[];//清空list
        }
      },
    })
  </script>
</body>

</html>

css样式

#app {
  text-align: center;
  background: #fbebd4;
  width: 480px;
  max-height: 400px;
  box-sizing: border-box;
  padding-top: 50px;
  border-radius: 5px;
  position: relative;
}

#app h2 {
  margin: 0;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #6a4d52;
  font-size: 30px;
}

#app .main {
  max-height: 300px;
  width: 454px;
  margin: 5px auto 0;
  transform: translateX(1px);
}

#app ul {
  padding: 0;
  max-height: 200px;
  overflow-y: scroll;
  margin-bottom: 0;
}

#app ul::-webkit-scrollbar {
  width: 0 !important;
}

#app li {
  list-style: none;
  border-bottom: 1px solid #6a4d52;
  text-align: left;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 25px;
  color: #8895a8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 40px;
  display: block;
}

#app li:hover {
  background-color: #fcfaed;
}

#app li span {

  color: #6a4d52;
}

#app button {
  margin-left: 300px;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

#app input {
  height: 30px;
  font-size: 20px;
  appearance: none;
  outline: none;
  border: none;
  padding-left: 5px;
  box-sizing: border-box;
  border-radius: 5px;
  color: #6a4d52;
}

#app .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 14px;
}

#app .bottom span {
  color: #929093;
}

#app .bottom span:last-child {
  cursor: pointer;
  color: #935256;
}

#app p {
  color: #929093;
  font-size: 20px;
  margin: 0;
  padding: 0;
}