vue+nes实现复古经典ui界面的待办事项代码-html代码-BFW代码库

vue+nes实现复古经典ui界面的待办事项代码

代码语言：html

代码描述：vue+nes实现复古经典ui界面的待办事项代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/nes.min.css">
  
<style>
html,
body,
pre,
code,
kbd,
samp {
  font-family: "Press Start 2P";
	-webkit-font-smoothing: none;
}

body {
  background: #7FB5B5;
  padding: 20px;
}

#app {
  background: #fff;
  border-radius: 10px;
	box-shadow: 8px 8px 20px #666;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.padding {
  padding: 1px 7px 2px;
}

.flex {
  display: flex;
}

.space {
  flex-grow: 1;
}


</style>

  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
  
</head>

<body>

<div id="app">
  <h1>{{title}}:</h1>
		<input type="text" class="nes-input" placeholder="Add task..." v-on:keyup.enter="addTodo">
	<span>&nbsp</span>
	<ul>
		<li v-for="todo in todos" class="flex"> 
			<label>
				<input type="checkbox" class="nes-checkbox" v-model="todo.done">
				<span>&nbsp</span>
			</label>
			<del v-if="todo.done">{{todo.........完整代码请登录后点击上方下载按钮下载查看