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 ...
随机推荐
- java开发之随笔记录
1.java 保留两位小数 DecimalFormat df = new DecimalFormat("#.##"); System.out.println(df.format(1 ...
- MySQL安装过程中出现“APPLY security settings错误”的解决方式
***********************************************声明*************************************************** ...
- 使用sed来自动注释/恢复crontab中的一个任务
# 注释crontab任务crontab -l > ${WORK_DIR}/cron_binarysed -i 's%\(.*/home/xyz/xyz.sh\)%#\1%' ${WORK ...
- 07 http内容压缩
一:http内容压缩 思考: Content-Length在之前的学习中,我们知道,代表返回的主体的长度 但此处,为什么返回的主体长度和content-length不一致呢? 原因在于: Conten ...
- VMware虚拟机下实现Linux与window文件夹共享
这里说的是在VMware虚拟机下来实现在windows与Linux下共享一个文件夹. 下面来说明一下是如何实现的: 1.安装VMware.Workstation. 2.安装Fedora10. 3.完成 ...
- C++ 中的几种初始化
前言 阅读C++教材时,想必你听过复制初始化,直接初始化,值初始化这三个概念吧.笔者本人常将其混淆,遂在此记录下它们的具体含义以便日后查阅. 复制初始化( copy-initialization ) ...
- SAP-ABAP系列 第一篇SAP简介
第一篇 SAP简介 SAP全名为System Application and Products in Data Processing.SAP目前是全世界排名第一的RP软件,号称“全球最大的企业管理解决 ...
- Java多线程学习(吐血超详细总结)转自博主林炳文Evankaka
文章由林炳文Evankaka原创.转载自http://blog.csdn.net/evankaka 写在前面的话:此文只能说是Java多线程的一个入门,其实Java里头线程完全可以写一本书了,但是如果 ...
- Redis 单例、主从模式、sentinel 以及集群的配置方式及优缺点对比(转)
摘要: redis作为一种NoSql数据库,其提供了一种高效的缓存方案,本文则主要对其单例,主从模式,sentinel以及集群的配置方式进行说明,对比其优缺点,阐述redis作为一种缓存框架的高可用性 ...
- java使用ftp局域网内多线程上传图片过慢
多线程ftp上传文件时候,图片上传很慢,调试和查询资料发现主要在:storeFile方法 解决方案如下: FTPClient fc设置setBufferSize 可以根据内存大小适当设置大点的缓冲区: ...