基于vue基础的记事本案例(学习记录)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>记事本的综合案例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="addTXT"> <input type="button" value="添加到记事本" @click="addReadTXT">
<br>
<ul style="list-style-type: none">
<li v-for="s,index in readTXTs">{
{index+1}},{
{s}}
<a href="javascript:;" @click="delReadTXT(index)">删除当前记录</a>
</li>
</ul>
<br>
<span>总数量：{
{readTXTs.length}}条</span><input type="button" value="删除所有" @click="delAll" v-if="readTXTs.length!=0">
</div>
</body>
<script>
const app = new Vue({
el: "#app",
data: {
addTXT: "",
readTXTs: ["第一次记事", "第二次记事"],
},
methods: {
addReadTXT() {/*添加到记事本方法*/
if (this.addTXT != "") {
console.log(this.addTXT);
this.readTXTs.push(this.addTXT);
this.addTXT = "";
} else alert("请输入内容");
},
delReadTXT(index) {/*删除记录*/
this.readTXTs.splice(index, 1);/*参数1：从哪个下标开始删除；参数2：删除几个元素*/
},
delAll() {/*删除所有*/
if (this.readTXTs.length > 0)
this.readTXTs = [];
else alert("已经删除完毕");
}
},
});
</script>
</html>
本文记录学习过程中的一个案例 学习网址为B站up主编程不良人, 原视频链接如下：https://www.bilibili.com/video/BV1SE411H7CY?p=7&spm_id_from=pageDriver
