Vue-记事本综合案例
程序员文章站
2022-07-04 19:33:19
...
使用vue做的记事本综合案例，初步认识相关事件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>记事本综合案例</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<input type="button" value="添加到记事本" @click="add">
<br>
<ul>
<li v-for="a,index in list">{{index+1}} {{a}} <a href="javascript:;" @click="del(index)">删除</a></li>
</ul>
<hr>
<span>总数量:{{list.length}}条</span>
<input type="button" value="清空所有" @click="delall" v-show="list.length!=0">
</div>
<!--完成记事本的查询所有
将所有的数据完成vue绑定
完成添加，删除，总数量-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
list:["早饭5块","午饭10块","晚饭8块"],
msg:""
},
methods: {
add(){ //添加到记事本
this.list.push(this.msg);
this.msg='';
},
del(index){ //删除一条数据
//根据下标删除数组中的某一个元素
this.list.splice(index,1);//参数1:从哪个下标开始删除；参数2:删除几个
},
delall(){
this.list=[];
}
}
})
</script>
</body>
</html>
上一篇： Vue的样式绑定
下一篇： vue综合案例——Vue购物车