vue.js关于循环出来多个input并让每个input后的修改按钮控制其值

xiangchaobin 发布于2019-08-22 11:16 / 3089人阅读

摘要：从后端返回的数据中，有时候你会遇到一堆的，然后每个后面都跟有一个按钮，就像这种情况其中有两个问题，在一个框里面输入值，然后所有的值都都会显示你输入的结果每个输入框点击能控制所有的而不只是它前面的那一个其实解决也不复杂，主要是运用到了循环以及

从后端返回的数据中，有时候你会遇到一堆的input，然后每个input后面都跟有一个按钮，就像这种情况

其中有两个问题，1：在一个框里面输入值，然后所有的值都都会显示你输入的结果 2：每个输入框点击能控制所有的input而不只是它前面的那一个
其实解决也不复杂，主要是运用到了循环以及index指数的功能，下面开始上代码，首先把它遍历出来

后台给我的数据是个对象，我用的是for in遍历出来，这个newData是走ajax请求来的数据

for(var x in newData){
    newData[x].value="";
}

然后数据中的每个对象都加上了这个value属性，接下来就好办啦，点击之后走个方法，直接获取

amendCardNum(index){
    var v=this.bstp[index].value;
    console.log(v)
}

大家做项目的时候一定要多想操作数据而不是操作dom，我之前就是陷到操作dom里面，要用for获取那个输入框的value之类的，然后越陷越深，这都是用jquery留下的后遗症，大家一定要注意，vue尽量不要用jquery，一切以操作数据为主而不是dom

GPU云服务器云服务器 js修改input Inputs input input file

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92069.html

学习Vue.js-Day1

摘要：学习内容，基本语法和概念，打包工具，实战操作参考文献官网官方资料库全家桶全家桶文档概念前端框架借助可以实现手机开发前端框架是一套构造用户界面的框架，只关于视图层前端的主要工作室跟用户界面打交道，中的，实现界面效果框架是为了提高开发学习内容 1，Vue基本语法和概念 2，打包工具 Webpack , Gulp3，实战操作参考文献：官网： https://cn.vuejs.org...

Cheriselalala 2019-08-29 16:34 评论0 收藏0
学习Vue.js-Day1

摘要：学习内容，基本语法和概念，打包工具，实战操作参考文献官网官方资料库全家桶全家桶文档概念前端框架借助可以实现手机开发前端框架是一套构造用户界面的框架，只关于视图层前端的主要工作室跟用户界面打交道，中的，实现界面效果框架是为了提高开发学习内容 1，Vue基本语法和概念 2，打包工具 Webpack , Gulp3，实战操作参考文献：官网： https://cn.vuejs.org...

Cristic 2019-08-02 11:23 评论0 收藏0
vue.js关于循环后台数据中监听多个input的问题

摘要：我们在获取后端数据的时候，有时候会在列表中生成很多的，而我们又想实时监听这些，有些同学用的监听，但我觉得数据太多的话用也不好写，就比如我下面的这种，修改一开始我也想用，但感觉特别蛋疼，最后还是用了常用的，而我这个还要控制，输入必我们在获取后端数据的时候，有时候会在列表中生成很多的input，而我们又想实时监听这些input，有些同学用的watch监听，但我觉得数据太多的话用watch...

phoenixsky 2019-08-22 13:40 评论0 收藏0
Vue.js Guide Essentials-说人话-速记版

摘要：以下内容根据部分速记。同时，需要在父组件标签中添加这个属性，该属性才能传递到子组件内。把父组件传递的数据当做子组件的初始值。以下内容根据Vue.js Guide Essentials部分速记。不含动画/mixin/SSR/路由/状态管理等部分. Introduction 建议阅读原文 https://vuejs.org/v2/guide/in... 什么是Vue 开始声明式...

Sanchi 2019-08-21 18:38 评论0 收藏0