这篇文章主要为大家详细介绍了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 ()方法,
通过: this.todos.push(this.mytodo);
向
代码如下:
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:[
'吃饭',
'睡觉',
'写代码'
]
},
methods:{
handleClick(){
// push() 添加方法
this.todos.push(this.mytodo);
this.mytodo = '';
this.title = '您好,小程序';
}
}
}
)
运行截图:
【图片暂缺】
【图片暂缺】
以上所述是小编给大家介绍的vue.js 实现输入框动态添加功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持!
本文来自:http://www.q1010.com/184/5356-0.html
注:关于vue.js 实现输入框动态添加功能的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。