当学习完react再回过头来看vue，就会发现，vue操作起来比react简单多了，下面让我们看看使用vue如何完成todolist吧。
思路：首先我们还是一样，首先我们创建一个input框，一个button，一个ul li的list列表，这时我们先在input上使用v-model双向绑定一个inputValue，当我input框中的内容改变时，inputValue就会跟着改变，那么我们创建一个list的空数组，然后当我点击button时，就可以将inputValue中的数据push到list数组中，最后在ul li中使用v-for循环出来就可以了，是不是非常简单呢！
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="" v-model="inputValue">
<button @click="handleBtn()">submit</button>
<ul>
<li v-for='item in list'>{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
inputValue:'',
list:[]
},
methods:{
handleBtn:function(){
this.list.push(this.inputValue)
this.inputValue=''
}
}
})
</script>
</body>
</html>
4023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
