vue记事本渲染以及交互

only‘t

已于 2024-04-03 08:42:27 修改

阅读量3k

点赞数 78

文章标签： vue.js javascript 前端

于 2024-04-01 11:33:55 首次发布

本文链接：https://blog.csdn.net/2301_77264434/article/details/137226566

版权

本文展示了使用HTML、CSS和Vue.js开发的一款简单记事本应用的源码，包括头部输入框、列表渲染、事件处理等功能。

摘要由CSDN通过智能技术生成

以下是记事本的源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
    <style>
/* 标题 */
h1{
  margin-top: 130px;
   color: red;
    font-size: 29px;
}

/* 按钮 */
button {
    /* 去掉黑圈 */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
/* 主体 */
body {
  line-height: 1.4em;
  background: #f5f5f5;
  color: #4d4d4d;
  min-width: 260px;
  max-width: 600px;
  margin: 0 auto;
  font-weight: 300;
}
/* 输入框 */
.new-todo{
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
}
/* 列表渲染 */
.todo-list li {
  position: relative;
  font-size: 24px;
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;
}
/* 列表渲染 */
.todo-list li {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}
/* 删除按键 */
.todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 10px;
  height: 10px;
  font-size: 30px;
  color: black;
  margin-bottom: 11px;
}
/* 删除按键 */
.todo-list li .destroy:after {
  content: 'x';
}
/* 显示删除 */
.todo-list li:hover .destroy {
  display: block;
}
/* 删除 */
.clear-completed {
  float: right;
  position: relative;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}


</style>
</head>
<body>
    <!-- 容器 -->
<section id="todoapp" boder="1">
    <!-- 头部输入框 -->
    <header class="header">
        <h1>小黑记事本</h1>
        <input v-model="inputValue" v-on:keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
        class="new-todo" />
    </header>
    <!-- 列表区域 -->
<section class="main">
    <ul class="todo-list">
        <li class="todo" v-for="(item, index) in list">
            <div class="view">
              <span class="index">{{ index + 1 }}.</span>
                <label>{{ item }}</label>
                <button @click="remove(index)" class="destroy"></button>
            </div>
        </li>
    </ul>
</section>
    <!-- 统计和清空 -->
    <footer class="footer">
        <!-- <span v-if="list.length" class="todo-count">
          <strong>{{ list.length }}</strong>
        </span> -->
        <button v-show="list.length" v-on:click="clear" class="clear-completed">
            全删
          </button>
    </footer>
</section>

</body>
<script src="D:\technology\Technology\vue.js\vue.js"></script>
<script>
// 创建 Vue 实例
let vm = new Vue({
    el:"#todoapp",
    data:{
        list: ["俯卧撑", "跑步", "游泳"],
    },
    methods:{     
        add:function(){
            let data = this.inputValue.trim()
            if (data != "")
                this.list.push(this.inputValue);
            else
                console.log("null");
        },
        remove: function (index)
        {
            console.log("remove", index);
            this.list.splice(index, 1);
        },
        // +
        clear: function ()
        {
            this.list = [];
        }
    }
})

</script>

</html>