加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-17 03:11:20 所属栏目:百科 来源:网络整理
导读:代码如下所示: vue-demo {{title}} {{subTitle}} 添加,修改 {{todo}} 上面是index.html 用 v-model 指令在表单控件元素上创建双向数据绑定,v-model 会根据控件类型自动选取正确的方法来更新元素。 简单地说:当在输入框输入“你好”时,在main.js 文件里

代码如下所示:

vue-demo
{{title}}

{{subTitle}}

添加,修改
  • {{todo}}

上面是index.html

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

简单地说:当在输入框输入“你好”时,在main.js 文件里面的mytodo的值就变成了:'你好‘。

当我点击添加修改按钮的时候,通过事件绑定,执行main.js 文件里面的 handleClick ()方法,

通过: this.todos.push(this.mytodo);

添加“你好”。

通过

  • {{todo}}
  • 渲染出来。

    然后又通过this.mytodo = '';

    使得输入框变为空。

    下面看main.js

    运行截图:

    总结

    以上所述是小编给大家介绍的vue.js 实现输入框动态添加功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。

    (编辑:李大同)

    【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

      推荐文章
        热点阅读