以下是记事本的源码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><!-- 容器 --><sectionid="todoapp"boder="1"><!-- 头部输入框 --><headerclass="header"><h1>小黑记事本</h1><inputv-model="inputValue"v-on:keyup.enter="add"autofocus="autofocus"autocomplete="off"placeholder="请输入任务"class="new-todo"/></header><!-- 列表区域 --><sectionclass="main"><ulclass="todo-list"><liclass="todo"v-for="(item, index) in list"><divclass="view"><spanclass="index">{{ index + 1 }}.</span><label>{{ item }}</label><button@click="remove(index)"class="destroy"></button></div></li></ul></section><!-- 统计和清空 --><footerclass="footer"><!-- <span v-if="list.length" class="todo-count">
<strong>{{ list.length }}</strong>
</span> --><buttonv-show="list.length"v-on:click="clear"class="clear-completed">
全删
</button></footer></section></body><scriptsrc="D:\technology\Technology\vue.js\vue.js"></script><script>// 创建 Vue 实例let vm =newVue({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>
本文转载自: https://blog.csdn.net/2301_77264434/article/details/137226566
版权归原作者 only‘t 所有， 如有侵权，请联系我们删除。
版权归原作者 only‘t 所有， 如有侵权，请联系我们删除。