前情回顾
上一课，我们学习了vue中是如何处理用户输入的。通过一个input框，使用v-mode指令，然后在data中定义一个变量，v-model的值等于该变量，就可以很方便的实现双向数据绑定。
着手开发一个超级简单的ToDoList
目标功能：一个input框处理用户输入，一个button按钮将用户输入的内容提交到ul列表中。
相关代码如下：
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>v-on</title>
6 <script src="vue.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <input type="text" v-model="inputValue" />
11 <button v-on:click="handleClick">提交</button>
12 <ul>
13 <li v-for="(item, index) of list" :key="index">{{item}}</li>
14 </ul>
15 </div>
16 <script>
17 var app = new Vue({
18 el: '#app',
19 data: {
20 inputValue: '',
21 list: []
22 },
23 methods: {
24 handleClick() {
25 this.list.push(this.inputValue)
26 this.inputValue = ''
27 }
28 }
29 })
30 </script>
31 </body>
32</html>
运行结果：
代码解析：
- 我们这节课综合运用了前几节课的
v-model,v-on,v-for指令，实现了简单的TodoList功能。 - TodoList核心功能就是用户输入内容，提交后显示在列表中。用户输入可以用
v-model指令，将数据绑定在inputValue变量中。我们在data中定义了inputValue变量，就是用来双向绑定用户输入的内容。 - 按钮中触发了一个点击事件，我们定义了一个handleClick方法，这个方法的作用就是将用户输入的内容inputValue添加到list列表中。在data里，我们定义了一个list数组，该数组就是用来保存按钮提交过来的内容，在代码中通过数组的push方法将inputValue的内容添加进来了。
this.inputValue = ''作用就是保证点击提交按钮后，input框的内容清空。handleClick() {}这是ES6的写法，与ES5的handleClick: function(){}等价。- 在
li标签中我们使用v-for循环输出列表内容。
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
