vue小白教程-4 想写啥写啥的小本本案例
程序员文章站
2024-02-16 15:14:46
...
需求分析：
功能需求：1.新增
新增列表结构 （用v-for和数组）
获取输入端数据（用v-model绑定）
按回车保存 （v-on.enter）
2.删除
v-on splice索引
3.统计
统计条数（v-textlength）
4.清空
点击清楚所有信息（v-on 删除数组）
5.隐藏
没数据时就隐藏（因为不频繁用v-if）
代码实现：
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UFT-8">
<meta name = "viewport" comtent ="width=device-width,initial-scale=1.0" >
<meta http-equiv ="X-UA-Compatible" Content = "ie=edge">
<title>实例：点击切换图片</title>
</head>
<body>
<!--input bar-->
<section id="todoapp">
<header class="header">
<h5>记事本</h5>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="想写啥写啥的小本本" class="new-todo" >
</header>
<!--table-->
<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 class="destory" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!--Statistics and empty-->
<footer class="footer"></footer>
<span class="todo-count"><strong>{{ list.length }}</strong> items left</span>
<button v-if="list.length!=0" class="clear-completed" @click="clear">
clear
</button>
</footer>
</section>
<!--bottom-->
<footer class="info"></footer>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#todoapp",
data:{
list:["哥斯拉",
"猪血糕"],
inputValue:"好好的"
},
motheds:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(){
console.log("删除");
console.log(index);
this.list.splice(index,1);
},
clear:function(){
this.list=[];
}
},
})
</script>
</body>
</html>
结果：