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

╰半橙微兮° 2022-05-22 12:11 239阅读 0赞

<!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>

**

</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 = '您好，小程序';

\}

\}

\}

)

运行截图：

![70][]

![70 1][]

微信公众号：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTcwNDY0_size_16_color_FFFFFF_t_70][]

[70]: /images/20220522/6bf0dfef95414e69b9eb3e1563a39429.png
[70 1]: /images/20220522/3fcfb74f4fb74eefb69d390f34fe9127.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTcwNDY0_size_16_color_FFFFFF_t_70]: /images/20220522/9b2b9d4ca50a4acbb9182d688261521c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui 输入框添加自定义图标

使用 layui 在输入框里添加自定义图标，layui 官网文档没有提供相关内容，但可以通过下面方式实现 1、准备好要使用的自定义图标如 Iconfont-阿里巴巴

浅浅的花香味﹌/ 2022年12月21日 04:51/ 0 赞/ 335 阅读

相关 html添加密码输入框,HTML input password密码输入框简介说明

摘要: 下文讲述html代码中input type=’password’时的相关属性简介说明,如下所示: input type=’password’ 简介当 input

桃扇骨/ 2022年10月06日 11:56/ 0 赞/ 242 阅读

相关利用js实现输入框动态提示信息

为了提高和用户的交互性，现在的输入框往往都采用输入信息自动提示的功能，类似于百度输入框中的提示功能。设计思路是：在输入框input的组件下面放置一个div，这个div主要是

小鱼儿/ 2022年09月23日 14:49/ 0 赞/ 304 阅读

相关 Vue - 动态添加移除 DOM元素（输入框示例）

效果图 > 该示例代码简洁干净，可直接复制运行查看效果。 `Vue` 动态添加移除 `DOM` 元素，基于此示例可拓展为自身业务逻辑。 ![在这里插入图片描述][f

墨蓝/ 2022年09月02日 00:45/ 0 赞/ 502 阅读

相关动态添加输入框

动态添加输入框,不废话,直接上代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="U

àì夳堔傛蜴生んèń/ 2022年08月07日 08:46/ 0 赞/ 222 阅读

相关 vue.js 实现输入框动态添加

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="

╰半橙微兮°/ 2022年05月22日 12:11/ 0 赞/ 240 阅读

相关 bootstrap基于JS动态添加、删除、获取input输入框

这段代码支持动态添加、删除，bootstrap里面还有更简单的实现动态效果，我这里是需要做一些特殊的处理才使用这样的方式的，复制粘贴的时候记得把<div>里面的代码改了。

「爱情、让人受尽委屈。」/ 2022年05月13日 08:08/ 0 赞/ 1058 阅读

相关 vue 通过按钮动态添加输入框

效果图如下 ![20190514081153743.gif][] 思路： 1、有一个数组counter,是空的 2、在页面上循环遍历这个数组（当然页面上显示

逃离我推掉我的手/ 2022年02月01日 09:41/ 0 赞/ 1035 阅读

相关 mui 动态添加数字输入框，增加减少按钮均无效

numbox 的自动初化是在 mui.ready 时完成的 mui 页面默认会自动初始化页面中的所有数字输入框，动态构造的 DOM 需要进行手动初始化。比如：您动态创

╰+攻爆jí腚メ/ 2021年11月11日 18:16/ 0 赞/ 493 阅读

相关 JQuery自动添加多文件输入框

<table id="fileTable"> <tr> <td> <input type="file" name="file"><in

迈不过友情╰/ 2021年09月12日 05:28/ 0 赞/ 313 阅读