<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>小黑记事本starzhou</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input v-model= 'inputValue' @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,idx) in todoList">
<div class="view">
<span class="index">
{{idx+1}}.</span>
<label>{{ item }}</label>
<button class="destroy" @click = 'remove'></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count" :length='todoList.length'> <strong>{{ todoList.length }}</strong> items left </span>
<button class="clear-completed" @click = 'clear'>
Clear
</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info">
<p>
<a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
</p>
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
<script>
var app = new Vue({
el: "#todoapp",
data: {
todoList: ["写代码", "吃饭饭", "睡觉觉"],
inputValue: "好好学习,天天向上1111111"
},
methods: {
add: function (){
this.todoList.push(this.inputValue)
},
remove: function (index){
this.todoList.splice(index,1)
},
clear: function (){
this.todoList = []
}
}
});
</script>
</html>
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
