通过制作功能模块,可以复习基础知识,同时可以延展出新的知识点。
1.首先写最简单的TodoList结构
希望输入内容,点击提交,提交项能显示在列表之中
因为列表为空,所以显示内容为空。
思路?
接着当用户点击提交按钮的时候,让它显示在列表之中。以前的操作需要操作dom,现在是在写数据。
只需要在用户点击提交的时候,把input框里的内容,放入list这个数组里面。数组有内容,li标签就会自动的循环,把数组的内容显示出来。
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue学习</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data:{
inputValue: '',
list: []
},
methods: {
handleClick: function () {
this.list.push(this.inputValue)
}
}
})
</script>
</body>
</html>
这里有个小小的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue学习</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data:{
inputValue: '',
list: []
},
methods: {
handleClick: function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
- this.inputValue = ''
1.把inputValue值添加到list之中
2.然后让inputValue恢复为空
3.数据里面inputValue变为空,标签里面inputValue值变为空。