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'> {{subTitle}}</p>
<div>
<input type="text" v-model="mytodo">
<button @click='handleClick'>添加，修改</button>
</div>
<ul>
<li v-for='todo in todos'>{{todo}}</li>
</ul>
</div>
<!-- built files will be auto injected -->
</body>
</html>
上⾯是index.html
⽤ v-model 指令在表单控件元素上创建双向数据绑定，v-model 会根据控件类型⾃动选取正确的⽅法来更新元素。简单地说：当在输⼊框输⼊“你好”时，在main.js ⽂件⾥⾯的mytodo的值就变成了：'你好‘。
当我点击添加修改按钮的时候，通过事件绑定，执⾏main.js ⽂件⾥⾯的 handleClick ()⽅法，
通过：  dos.do);
向
todos:[
'吃饭',
'睡觉',
'写代码'
]
添加“你好”。
通过
<ul>
<li v-for='todo in todos'>{{todo}}</li>
</ul>
渲染出来。
然后⼜通过do = '';
使得输⼊框变为空。
下⾯看main.js
new Vue({
el:"#app",
data:{
title:'hello vuejs',
subTitle:'Vue React Angular is good',
showSub:true,
mytodo:'',
todos:[
'吃饭',
'睡觉',
'写代码'
]
},
methods:{
handleClick(){
// push() 添加⽅法
this.title = '您好，⼩程序';
vue与react面试题}
}
}
)
运⾏截图：
总结
以上所述是⼩编给⼤家介绍的vue.js 实现输⼊框动态添加功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。