vue记事本渲染以及交互

作者：空白诗007 | 2024-07-13 06:01:44

踩

vue记事本渲染以及交互

以下是记事本的源码

<!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>
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/817938