tnblog
首页
视频
资源
登录
原

vue动态添加文件选择框，vue动态添加input

5857人阅读 2021/12/21 16:30 总访问：851452 评论：0 收藏：0 手机
分类: 前端


code:

  1. <!DOCTYPE html>

  2. 

  3. <html>

  4. <head>

  5.     <meta name="viewport" content="width=device-width" />

  6.     <title>Index</title>

  7.     <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

  8. </head>

  9. <body>

  10.     <div id="app">

  11.         <form action="/FileLoad/DoFileUp" method="post" enctype="multipart/form-data">

  12.             <div id="add" v-for="item in files" v-html="item">

  13.                 {{item}}

  14.             </div>

  15.             <input type="submit" value="上传" />

  16.             <input type="button" value="添加" id="aa" @@click="add" />

  17.         </form>

  18.     </div>

  19. 

  20. </body>

  21. </html>

  22. 

  23. <script>

  24. 

  25.     var vm = new Vue({

  26.         el: "#app",

  27.         data: {

  28.             files: ["<input type=\"file\" name=\"myfile\" multiple=\"multiple\" />"]

  29.         },

  30.         methods: {

  31.             add: function () {

  32.                 this.$data.files.push("<input type=\"file\" name=\"myfile\" multiple=\"multiple\" />");

  33.             }

  34.         }

  35.     })

  36. 

  37. </script>


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue.js+Layer实现表格数据绑定与更新
一：使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去，在更新方法里边就可以直接...

vue.js 实现省市联动
HTML代码&lt;divid=&quot;pro_citys&quot;&gt; 省:&lt;selectid=&quot;provice&quot;v-on:change=&quot;prochange()&quo...

vue.js常见问题
一：花括号当做字符串显示的问题1：检查下绑定到vue.js的id是否重复，如果id重复了，就有可能存在这种问题，因为有可能把数...

vue.js常用指令
v-html可以把字符串当成一个html来渲染，而不是原样输出Html类似.net mvc中的@Html.Raw()方法&lt;divv-html=&quot;item.tit...

干货！div滚动到一定位置就固定他。vue中实现一侧滚动到底部就固定
尊重原创：转载请注名出处div滚动到一定位置就固定他，例如左边的内容很多，右边的内容很少，如果不处理滚动到一定位置后右...

vue.js常用指令，事件绑定等，vue过滤器解析状态过滤器多个参数。vue表格状态解析。vue解析类型，element ui解析类型，状态，el-tag
按照html的编码显示：v-html&lt;div class=&quot;font_info&quot; v-html=&quot;item.Content&quot;&gt;{{item.Content}}&l...

vue.js if用法
vue.js if可以做一些判断例如我们要把下面这个输出varvm=newVue({ el:&quot;#content&quot;, data:{ titles:[&quot;小明...

vue.js 学习日记第一章-安装vue开发环境
官网：https://cn.vuejs.org/v2/guide/ 这是一篇学习性文章，不定时更新，用来记录我学习vue.js的过程。 首先，是v...

vue.js 学习日记第二章-在vue中编写function及一些简单指令
官网：https://cn.vuejs.org/v2/guide/ vue.js 学习日记第一章：http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第三章-vue中的简单事件及事件修饰符
官网：https://cn.vuejs.org/v2/guide/ vue.js 学习日记第二章：http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第四章-vue中文本框数据获取与绑定及computed计算属性
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第三章： http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第五章-v-if和v-for指令的使用方式
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第四章： http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第六章-vue组件初步学习
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第五章： http://www.tnblog.net/18323015640/article/details/2...

vue.js学习日记第七章-搭建脚手架
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第六章： http://www.tnblog.net/18323015640/article/details/2...

vue实现好友选中效果
逛过vue官网肯定会发现一个有趣的指令“v-for”，相比与以前拼接html代码确实要上档次一点，而且减少了工作量，先看一波效...

js时间格式化vue.js时间格式化，带T 时间格式化

也可以借助moment库， 参考：https://www.tnblog.net/aojiancc2/article/details/8079moment库有点大，推荐可以使用day.js...
这一生多幸运赶上过你.
博主信息
排名
8
文章
231
粉丝
7
评论
7
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术