Vue案例：任务列表之页面原型

来自CloudWiki
跳转至： 导航， 搜索

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

		<title></title>
	</head>
	<body>
		<div class="home">
			<h2>任务列表</h2>
			<ul>
				<li><input type="checkbox">预习vuex知识点</li>
				<li><input type="checkbox">预习vuex知识点2</li>
				<li><input type="checkbox">预习vuex知识点3</li>
			</ul>
			<div>
				任务总数：3 还有3未完成：【<a href="#">完成</a>】
			</div>
			<div>
			    <input type="text" placeholder="请输入任务名称">
				<button>添加</button>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!'
				}
			})
		</script>
		<style >
		     *{
			   margin:0;
			 }
			 .home{
			    width:400px;
				margin:0 auto;
				background-color:pink;
				line-height:30px;
				padding:10px;
			 }
			 h2{
				text-align:center;
			 }
			 ul {
			    text-align:left;
			 }
			 ul li{
				list-style:none;
			 }
		</style>
	</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=Vue案例：任务列表之页面原型&oldid=32701”