vue中循环时动态绑定值
在vue项目中,有很多需要动态循环绑定的场景,在未知绑定数量的情况下只能动态生成绑定值
1.首先在data中定义一个对象,我在项目中时循环绑定下拉框,所以定义了一个selectVal = {}
2.在循环时通过下标在对象中创建新的值,我循环得时数组allGoodsClass是一个二维数组,此时通过下标的方式绑定,selectVal中得值就会为selectVal0 : "xxx",selectVal1 : "xxx"
<el-select v-for="(item, index) in allGoodsClass" :key="index" v-model="selectVal['selectVal'+ index]" class="goods-select" placeholder="请选择" size="mini" @change="changeGoodsClass(index)">
<el-option
v-for="(item1,index1) in item"
:key="index1"
:label="item1.commodity_classification_name"
:value="item1.id"
/>
</el-select>
3.在change事件触发后,通过下标即可以知道当前下拉框是循环中的哪一个,此时即可通过selectVal['selectVal' + index]取出对应的值
vue中循环时动态绑定值的更多相关文章
- vue点击时动态改变样式 ------- 最简单的方法
vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...
- C# bootstrap之表格动态绑定值
这段时间研究了下bootstrap,打算从表格开始学习,实现动态绑定值,在网上找了挺多例子,但是很少有写全的,要不就太复杂,实现效果后总结一下,直接拷贝过去可以用. 第一步:先去官网上下载bootst ...
- Vue中循环的反人类设计
今天学习Vue到循环那里,表示真是不能理解Vue的反人类设计 具体看代码吧! <!DOCTYPE html> <html> <head> <meta char ...
- 03.VUE学习之动态绑定值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- vue中v-bind:class动态添加class
1.html代码 <template v-for='item in names'> <div id="app" class="selectItem&qu ...
- 聊聊 Vue 中 title 的动态修改
由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一 ...
- foreach循环时动态往数组里添加数据
今天在用TP做项目的时候遇到一个问题,foreach的时候需要动态往数组里添加数据,示例代码如下: $arr = array( array('id'=>'字符串1','name'=>'字符 ...
- MVC4 绑定下拉框方法,解决编辑时不绑定值
方法一 Controller 部分代码: public ActionResult Modify(int id) { //3.1.1 检查id //3.1.2根据id查询数据 Models.Stude ...
- vue处理循环列表动态数据问题
调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 <!DOCTYPE ...
随机推荐
- JavaScript读书笔记(4)-变量、作用域和内存问题
1.ECMAScript数据类型分为:基本类型值和引用类型值: ECMAScript中所有函数的参数都是按值传递的: 检查对象的类型:varible instanceof constructor Al ...
- Linux中ctrl+z 、ctrl+c、 ctrl+d差别
ctrl+c,ctrl+d,ctrl+z在linux程序中意义和差别 ctrl+c和ctrl+z都是中断命令,可是他们的作用却不一样. ctrl+c是强制中断程序的运行,,进程已经终止. ct ...
- Microsoft Visual Studio 2013 已停止工作的解决方法
VS最近莫名奇妙老师崩溃,每次只能修复以后才能正常使用, 后参考 http://www.jb51.net/softjc/226465.html 网页的介绍, 恍然:之前使用OSchina GIT 服务 ...
- 【BZOJ1483】[HNOI2009]梦幻布丁 链表+启发式合并
[BZOJ1483][HNOI2009]梦幻布丁 Description N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1,2 ...
- linux环境下启动tomcat7出现时间过长(已经编译完成的项目)问题解决!
已经编译完成的项目,系统启动过程中,提示: INFO: Starting Servlet Engine: Apache Tomcat/7.0.81 Sep 20, 2017 3:17:32 PM or ...
- Python2.7使用virtualenv windows7
环境: python2.7 windows7 一.安装 H:\>pip install virtualenv 二.创建项目目录 H:\>mkdir envtest H:\>cd en ...
- 有关Option.inSamplSize 和 Compress 图片压缩
1.图片占用内存:占用的内存 = 图片长度 * 图片宽度 * 单位像素占用的字节数 注: 图片长度和图片宽度就是图片在行列上的像素数量. 图片格式: ALPHA_8:表示8位Alpha位图,即A=8, ...
- 负载均衡LVS
可参考:http://ixdba.blog.51cto.com/2895551/555738 http://os.51cto.com/art/201202/319979.html 也可以参考官网:ht ...
- UVA11551 Experienced Endeavour —— 矩阵快速幂
题目链接:https://vjudge.net/problem/UVA-11551 题意: 给定一列数,每个数对应一个变换,变换为原先数列一些位置相加起来的和,问r次变换后的序列是多少 题解: 构造矩 ...
- 第二篇:python基础之核心风格
阅读目录 一.语句和语法 二.变量定义与赋值 三.内存管理 内存管理: 引用计数: 简单例子 四.python对象 五.标识符 六.专用下划线标识符 七.编写模块基本风格 八.示范 一.语句和语法 # ...