-
2020-04-29 08:33:22
--------------- html 部分 ------------- <tr v-for="(item,index) in orderList"> <td>{{item.orderNo}}</td> <td> <button class="btn btn-primary" :id="getId(item.id)" @click="bidFun(item.id)">申办</button> </td> </tr> --------------- js 部分 ------------- method: { "getId": function (itemId) { return itemId; } }
更多相关内容 -
vue 动态绑定 id
2019-05-24 16:45:57<div class="layui-tab-item" :class="{'layui-show': key === 0}" v-for="(cur, key) in eventData.event" :key="key"> <div class='layui-input-block'>...ul class="ztree treeBox" :id="`mo...<div class="layui-tab-item" :class="{'layui-show': key === 0}" v-for="(cur, key) in eventData.event" :key="key"> <div class='layui-input-block'> <ul class="ztree treeBox" :id="`modelTree${key}`"></ul> <!--动态绑定ID--> </div> </div>
-
vue,el-select 绑定id值
2020-08-13 09:53:46el-select 绑定id值 在实际需求中,el-select的数组选项有多个,展示给用户选择的是每个选项的文本,但是传给后台的数据需要文本对应的id 比如选项数组是:applyTypeList:[{id:1,label:‘甜品’},{id:2,label:‘烧烤...el-select 绑定id值
在实际需求中,el-select的数组选项有多个,展示给用户选择的是每个选项的文本,但是传给后台的数据需要文本对应的id
比如选项数组是:applyTypeList:[{id:1,label:‘甜品’},{id:2,label:‘烧烤’}]
下拉框可选的是甜品和烧烤,但是我们需要记录的不是甜品和烧烤,而是他们对应的id的值,此时就需要绑定id值。HTML
<el-select v-model="applyType" placeholder="申请类型" clearable> <el-option v-for="item in applyTypeList" :key="item.id" :value="item.id" :label="item.label"></el-option> </el-select>
绑定后,applyType会根据用户的选择而变化成不同的id值。
-
动态绑定id,根据ref动态获取元素解决不能动态绑定ref的问题;elementui框架中绑定动态的ref,动态绑定v-...
2019-08-29 16:15:11(一)、动态绑定id //动态绑定id <button @click="insertAtCursor(item,index)" type="button" :id="'btn'+index">插入字</button> //<button @click="insertAtCursor(item,index)" type="button...(一)、动态绑定id
//动态绑定id <button @click="insertAtCursor(item,index)" type="button" :id="'btn'+index">插入字</button> //<button @click="insertAtCursor(item,index)" type="button" :id="`btn${index}`">插入字</button> methods:{ insertAtCursor(){ console.log(document.querySelector('#btn'+index)); console.log(document.getElementById('btn'+index));//两种方法均可 } }
打印结果:
(二)、ref在v-for循环中不能动他绑定,但可以根据根据元素的ref[index]动态的找到元素。因为v-for循环中,ref动态绑定需要的唯一标志还没有加载完成(我是这么理解的),可详见vue官方文档https://cn.vuejs.org/v2/api/#ref
在项目中我根据需求解决这个问题
<!--循环--> <div style="display:flex;flex-direction:column;"> <div class="el-textarea" v-for="(item,index) in shoppeList" :key="index"> //添加一个class,以便于区分打印的是否正确 <textarea type="textarea" rows="10" autocomplete="off" :class="`class${index}`" ref="ttl"></textarea> <button @click="insertAtCursor(item,index)" type="button">插入字段</button> </div> </div> data(){ return{ shoppeList: [{id: 3,value: "name",},{id: 4,value: "sex"}], } }, menthods:{ insertAtCursor(item, index) { console.log(this.$refs.ttl[index]) } }
打印结果:
(三)注意:针对ref这种,我再使用elementui的时候,发现ref是可以绑定动态值的 ,这是基于在elemenui框架中表格加载完成以后,在渲染表格内部的元素,此时利用插槽可以拿到表格的index,这样ref在使用的时候动态的ingdx就是有的
举例:
<!-- elementui 框架表格中使用动态的ref --> <el-table :data="shoppeList"> <el-table-column prop=""> <template slot-scope="scope"> <div> //绑定一个动态的id以至于区分 <textarea :rows="8" placeholder="请输入内容 " :id="'textareaId'+scope.$index" :style="{color:scope.row.color}" :ref="'ttl'+scope.$index"> </textarea> <el-button @click="insertField(scope.$index,scope.row)">点击</el-button> </div> </template> </el-table-column> </el-table> data(){ return{ shoppeList: [ { id: 3, value: "name"}, { id: 4, value: "sex"}], } }, methods:{ insertField(index,item){ console.log(index,item); console.log(this.$refs['ttl' + index]); } }
打印:
(四)、动态绑定v-model
在v-for循环中动态绑定v-moldel
1、绑定item的key值,v-model是双向绑定,这样的话在更改texarea的时候,item的value值也随之更改了。可优化成2
<div v-for="(item,index) in shoppeList" :key="index"> <span>{{item}}</span> <textarea :rows="8" placeholder="请输入内容 " :id="'textareaId'+index" v-model="item.value"> </textarea> </div>
2.优化
绑定一个自定义的:在文本中输入内容的时候他会给item添加一个content值,这样在以后需要赋值的时候既可以用了。
<div v-for="(item,index) in shoppeList" :key="index"> <span>{{item}}</span> <textarea :rows="8" placeholder="请输入内容 " :id="'textareaId'+index" v-model="item.content"> </textarea> </div>
效果:
-
elementui el-select组件绑定id和name 取得id和name的值 使用filter方法
2021-03-26 13:50:00<template> <el-select v-model="dataForm.liveUserID" clearable @change="queryName" > <el-option v-for="dict in anchorOption" :key="dict.liveUserID" ... :value="dict.li -
vue 动态绑定id并传值
2019-01-18 15:34:36转:https://blog.csdn.net/junyu1024/article/details/78722574 -
element-ui下拉框使用value绑定id
2019-05-24 10:01:38因为在这里是先显示label在显示value所以可以吧名字写在label里,把id写在value里,然后可以在@change里面使用value即id。 <el-form-item label="角色名"> <el-select v-model="value" placeholder="请... -
vue元素动态设置/绑定id。v-bind/on/model小结
2020-02-25 01:22:11这里用到的是v-bind知识,用于绑定...1.给id动态绑定一个函数,和绑定数据无异,因为函数return了数值回来 <div v-for="(item,index) in items" :key="item.id" :id="ssstep(index)" > 2.函数 step:functi... -
vue v-for循环回来的数据动态绑定id
2018-07-28 13:26:57代码效果图!!!!! <ul&... :id="forId(index)"> <span class="channel-li-li-border"> <span class="firstLevel"> -
前端笔记-使用vue绑定id使得组件更加灵活(在使用echarts时常用)
2019-08-08 09:44:47目录 基本概念 代码与实例 ...这个问题是在我使用echarts时出现的,因为echarts有这样的一个函数(官方实例) ...这样的画就需要div的id号,为了使得这个id比较灵活,可以使用vue的绑定:id或者v-bind... -
js批量绑定id为 click事件demo
2018-09-18 23:44:37<input id="11" type="button"/> <input id="22" type="button"/> <input id="33" type="button"/> <input id="44" type="button"/> <input id="55" type="button"/> <input id="66" type="button"/> uu("#... -
vue.js vue v-for循环遍历如何动态绑定id
2019-04-07 17:58:18html页面的代码如下 <body> <!-- 返回的按钮 --> <div id="allli"> <ul v-for="(item,index) in sites"> <li>{{item.name}}<...li :id="step(index)" >...img :id="st... -
用vue,如何给一个列表中的每个元素标签绑定id
2017-06-06 09:06:42现在我想写三个span标签,并且每个标签上都要绑定上一个id。结构现在是这样的:(tabTitle,index1) in tabTitleList">{{ tabTitle.title }}</span>JS如下:var app3=new Vue({ el:'#app3', data:{ -
vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性
2017-11-14 08:39:05vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性 -
vue绑定动态id
2018-11-20 10:51:13场景:使用vue中的v-for循环动态的添加input,在编辑的时候需要获取input的id进而获取编辑值传入后台。由于通过:id传入的id有可能空值,因此我采用了拼接的方式将属性值和下标index拼接在一起做为id,成功解决空值... -
mpvue中绑定id 或class实现组件(标签)样式的改变
2019-03-07 13:12:28使用官方的样式绑定比较繁琐,它的css的键通常和<style>中的键的写法不一样导致无法再界面上呈现出来,还以为官方的样式绑定不能使用。 <p v-bind:style="{ color: activeColor, ... -
微信小程序动态绑定unit-id
2020-05-15 13:25:19这里写自定义目录标题微信视频广告绑定unit-id不可行解决方法 微信视频广告绑定unit-id不可行 早上碰到的一个问题,使用微信的视频广告组件AD时,动态绑定后台传来的参数时,竟然报错了。我晕,动态绑定居然不行。 ... -
关于layer如何绑定img 与 id
2017-12-04 10:27:39如果在标签中直接使用id = "option.id" 这样的形式是没用的 需要:id="option.id" 在前面添加冒号 Img等标签 同理 -
vue 通过绑定事件获取table 当前行中的id
2019-09-06 17:54:02"del(m.id)" > 删除 < / button > < / td > < / tr > < / table > < / div > < / template > < script > export default { data ( ) { return { message : [ ] } } , methods... -
v-for(:key)绑定index、id、key的区别
2019-07-04 09:33:00Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究 在github上阅览README.md以获得最佳阅读体验,点这里 v-for响应式key, index及item.id参数对v-bind:key值造成差异研究 实验背景 ... -
vue中如何在v-model中动态的使用将index拼接字符串后绑定id属性
2020-11-30 19:43:07v-model="currentComponent['prop' + currentComponent.id]" currentComponent 是动态值,如:0-1-2-3 这样只能 currentComponent.prop0='123' 这不是我要的效果,我要的效果是currentComponent.prop0.num='... -
VUE中,HTML对象的ID动态绑定,在mounted中根据ID无法获取到对象
2018-09-17 15:21:02页面如下: <template> <div :id="objId" class="randomBoxDiv"...其中,div的ID是动态绑定的。 JavaScript代码如下: <script> export -
Android view的绑定方法
2022-03-23 14:00:08优点使用简单通过一个BindView注解,传入一个Resource Id就能轻松获取到Id对应的View,缺点是gradle5.0以后无法再被使用,重点是ButterKnife正在被慢慢弃用。 3、ViewBinding:Google官方正在大力推广的View -
Ubuntu下绑定串口的两种方式ID法和serial法
2018-11-27 15:36:20一、绑定软件设备号,即idVendor和idProduct(适用于不同生产商生产的不同USB串口) 1.lsusb 查看自己的USB串口ID。我的USB串口是0403:6001 2.vim /etc/udev/rules.d/myusb.rule 按 i 进入插入模式 KERNEL==&... -
vant-ui之Field输入框和Picker结合使用时,如何绑定正确的id类型的值的问题。
2020-06-22 17:02:44点击表单的档案组,弹出Picker选择组件,选择正确的值,填充到表单项,但是,提交到服务器去,需要提交对应的id,而不是看到的字符串。 如何实现? 实现方式一: 定义两个属性,classId和className, 她两是一 一... -
Vue基础知识总结 2:vue 动态绑定
2021-07-12 21:51:59七、动态绑定属性 1、v-once 2、v-cloak 3、v-bind基础用法 4、v-bind绑定class属性 5、v-bind绑定class属性,简单写法: 6、v-bind绑定style样式 一、前言 大家好,我是哪吒,一个热爱技术的年轻人,架构师,是每一... -
c# combobox绑定了数据源,显示为name,值为id
2015-06-25 03:35:29c# combobox绑定了数据源,显示为name,值为id, 1.当选择用户选择name时,获取id值 2,当用户输入值时,与数据源的name进行匹配,匹配成功则,获取相应id,否则提示用户没有该数据,,怎么做 dataset dscommon ...
收藏数
790,429
精华内容
316,171