Vue todo list 案例
废话不多说,整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is a vue todo list</title>
</head>
<body>
<div id="app">
<input type="text" v-model="text"><!--双向数据绑定-->
<button type="button" @click="add">增加</button>
<ul>
<li v-for="item in list">
<p>
{{item.text}}
<button type="button" @click="dele(item)" >删除</button>
</p>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
text:' ',
list:[
{text:'kate1'},
{text:'kate2'},
{text:'kate3'},
{text:'kate4'},
{text:'kate5'}
]
},
methods:{
add:function (){
if(!this.text.replace(/\s/g,'')){
alert("请输入内容")
}
this.list.push({text:this.text})
this.test=''
},
dele:function (item) {
this.list.splice(this.list.indexOf(item),1)
}
}
})
</script>
</html>
使用vue框架,首先引入vue:,在编辑好的HTML中,引用 v-for 指令基于一个数组来渲染一个列表,在定义方法,对数据进行操作,简单易理解,值得一提的是,在命名中,刚开始定义删除的方法名为delete,但一直报错,原来这是js里的专用,改了后删除功能正常。