TodoList demo
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >TodoList</ > < src = "./vue.js"></ ></head><body> <div id ='app'> <input type="text" v-model="inputValue"/> <button v-on:click="handleBtnClick">提交</button> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> < > var app = new Vue({ el: '#app', data:{ list: [], inputValue:'' }, methods:{ handleBtnClick:function(){ this.list.push(this.inputValue) this.inputValue = '' } } }) </ > </body></html> v-model="inputValue"/> <button v-on:click="handleBtnClick">提交</button> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> < > var app = new Vue({ el: '#app', data:{ list: [], inputValue:'' }, methods:{ handleBtnClick:function(){ this.list.push(this.inputValue) this.inputValue = '' } } }) </ > </body></html>1. <li v-for="item in list"></li> 告诉 Vue 在 li 标签里面要循环 list 中的数据，循环的每一项都放到 item 里面
2.<button v-on:click="handleBtnClick"> 调用函数 handleBtnClick ，将其定义在 methods 中
3.v-model="inputValue 指的是数据的双向绑定(把 input 中的 Vue 值与 data 中的 inputValue 值进行绑定，一个变化另一个随之变化)，当 Input 框中内容发生变化的时候，data 中的 inputValue 就会随之变化
4.this.list.push(this.inputValue) Vue 的实例会自动的到 list 中寻找 inputValue,这里的 inputValue 与 data 中的 inputValue 是一回事 ;每次提交时能获取到 inputValue 中的内容，将其加入到 list 数据里面，使其中数据发生变化，进而导致页面发生相同的变化
5. this.inputValue = '' 在每次提交后将框中的内容清空
运行结果
继续阅读与本文标签相同的文章
-
初识 JSP---（EL表达式）
2026-05-26栏目： 教程
-
初识 JSP---（注释/小脚本/声明/指令/动作/内置对象）
2026-05-26栏目： 教程
-
初识 JSP---(Cookie / 重写URL / 防止表单重复提交）
2026-05-26栏目： 教程
-
初识 JSP---(Session机制)
2026-05-26栏目： 教程
-
初识 JSP---(转发和重定向)
2026-05-26栏目： 教程