vue.js实现了动态添加输入框的功能

代码如下：

！DOCTYPE html html head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' title vue-demo/title/head body div id=' app ' P { { title } }/P P v-if=' showSub ' { TItle } }/P div输入类型=' text ' v-model=' my todo ' button @ click=' handleclick ' add and modify/button/div ul Li v-for=' todo in todos ' { todo } }自建文件将被自动注入-/body/html以上是index.html

使用v-model指令在表单控件元素上创建双向数据绑定，v-model会根据控件类型自动选择正确的方法更新元素。

简单来说：当你在输入框中输入“hello”时，main.js文件中mytodo的值就变成了“hello”。

当我单击添加修改按钮时，通过事件绑定在main.js文件中执行handleClick()方法。

传递了：this . todos . push(this . my todo)；

到

Todos:['吃饭'，'睡觉'，'写代码']加“你好”。

通过

ul Li v-for=' todo in todos ' { todo } }/Li/ul渲染它。

然后通过这个. this.mytodo=

使输入框为空。

请看下面的main.js

new Vue({ el:'#app '、data : { title : ' hello vuejs '、subtitle : ' Vue React Angular is good '、showSub:true、mytodo: ' '、Todos:[' eat '、' sleep '、' write code '])}、方法3: { handleclick(){//push()添加方法this . todos . push(this . my todo)；this.mytodo=This.title='你好，小程序'；}}})运行截图：

摘要

以上是边肖介绍的vue.js动态添加输入框的功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！