关于vue的优点就不讨论了，这里直接上项目。
1、添加vue.js的依赖库
2、编写html网页
代码如下：
<!DOCTYPE html>
<html lang=\"en\">
<head>
< charset=\"UTF-8\">
< name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
< http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
< >TodoList</ >
< src=\"../Vue/vue.min.js\"></ >
</head>
<body>
<div id=\"app\">
<!-- v-model代表数据的双向绑定,意思就是input输入的内容改变时，inputValue的值会变
当inputValue的值改变时，input输入框的内容也会改变 -->
<input type=\"text\" v-model=\"inputValue\">
<button v-on:click=\"handleSubmit\">提交</button>
<ul>
<!-- v-for的功能：去循环list里面的数据，循环得到的每一个数据都放到item里面 -->
<li v-for=\"item in list\">{{item}}</li>
</ul>
</div>
< >
//新建一个vue实例
var app=new Vue({
el:\'#app\',
data:{
// list是一个数组
list:[],
inputValue:\'\'
},
// 函数要定义在对应的Vue实例里面
methods:{
handleSubmit:function(){
//这里我们想要找到data中的inputValue值,直接使用this即可
//,this会去遍历data里面的内容,现在把inputValue的值加入到list中
this.list.push(this.inputValue);
//提交后把input框里面的值清除
this.inputValue=\'\' ;
}
}
})
</ >
</body>
</html>
这里解释一下我的思路：
首先在html的body里面放一个input框、button按钮和一个ul标签，使用v-model将input框的内容和vue实例中data的inputValue属性双向绑定，双向绑定的意思就是当inputValue的值改变时，input框的值会改变，反之input框的值改变时，inputValue的值也会改变。
然后使用v-on：click给button绑定一个点击事件，当点击button时，将input框内输入的内容添加到ul标签里面去。这里的主要实现思路是首先使用v-for使li标签循环vue实例data中的一个list属性数组，每次点击button时，通过push方法将input框内输入的值添加到list数组中，然后就可以展示出来。
主要使用的vue的方法为：v-model双向绑定、v-for循环遍历、v-on：click绑定点击事件
继续阅读与本文标签相同的文章
上一篇 :
Ubuntu 静态ip设置与DNS
-
Excel表格中的柱状图上如何添加平均线？
2026-05-19栏目： 教程
-
嘉益仕MES教你如何搞定精细化管理
2026-05-19栏目： 教程
-
Kotlin的分享
2026-05-19栏目： 教程
-
腾讯发布智慧社区标准化解决方案，目前已覆盖超过7000个小区
2026-05-19栏目： 教程
-
四方科技：冷链装备龙头 罐箱业务全球领先
2026-05-19栏目： 教程