Vue实现简单记事本
本项目主要练习Vue基础知识的使用,利用v-model进行双向绑定,v-for对数组进行遍历。
以下是实现功能的逻辑代码
var app = new Vue({
el:"#todoapp",
data:{
list:[],
inputValue:""
},
methods:{
//增加
add(){
if(this.inputValue == ""){
alert("请输入要记录的内容")
}else{
this.list.push(this.inputValue);
this.inputValue = "";
}
},
//删除
remove(index){
this.list.splice(index,1)
},
//清空 并初始化输入框
empty(){
this.list = [];
this.inputValue = "";
}
}
})
效果图