vue.js 实现输入框动态添加功能
更新时间：2018年06月25日 10:55:07 作者：加油TG
这篇文章主要介绍了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 实现输入框动态添加功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了Vue实现图片轮播组件思路及实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了socket io与vue-cli的结合使用的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了 Vue press 支持图片放大功能,本文通过代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了vue3与elementui封装一个便捷Loading，，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要给大家介绍了关于VUE中鼠标滚轮使div左右滚动的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要为大家介绍了vue2从template到render模板编译入口详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
在现代Web应用程序中,数据导出到Excel格式是一项常见的需求,Vue.js是一种流行的JavaScript框架,允许我们构建动态的前端应用程序,本文将介绍如何使用Vue.js和xlsx组件轻松实现Excel数据导出功能,需要的朋友可以参考下2023-10-10
在使用vue脚手架搭建前端工程时,经常会遇到打包上线后的缓存问题,许多开发者会直接在index.html中加入类似以下代码来解决缓存问题,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
这篇文章主要来和大家分享一些关于 Vue3中Hooks封装的技巧,希望能够为大家在 Vue 3 项目中更好地利用 Hooks 提供一些思路和实践经验2023-12-12
在项目开发中我们难免碰到需要对webpack配置更改的情况,下面这篇文章主要给大家介绍了关于vuecli中chainWebpack的常用操作举例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
最新评论