精华内容
下载资源
问答
  • Vue v-for 动态绑定 ID
    千次阅读
    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:46
    el-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 //动态绑定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>
    
    

    效果:

     

     

    展开全文
  • <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="请...
  • 这里用到的是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
    代码效果图!!!!! &lt;ul&... :id="forId(index)"&gt; &lt;span class="channel-li-li-border"&gt; &lt;span class="firstLevel"&gt;
  • 目录 基本概念 代码与实例 ...这个问题是在我使用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("#...
  • html页面的代码如下 <body> <!-- 返回的按钮 --> <div id="allli"> <ul v-for="(item,index) in sites"> <li>{{item.name}}<...li :id="step(index)" >...img :id="st...
  • 现在我想写三个span标签,并且每个标签上都要绑定上一个id。结构现在是这样的:(tabTitle,index1) in tabTitleList">{{ tabTitle.title }}</span>JS如下:var app3=new Vue({ el:'#app3', data:{
  • vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性
  • vue绑定动态id

    万次阅读 2018-11-20 10:51:13
    场景:使用vue中的v-for循环动态的添加input,在编辑的时候需要获取input的id进而获取编辑值传入后台。由于通过:id传入的id有可能空值,因此我采用了拼接的方式将属性值和下标index拼接在一起做为id,成功解决空值...
  • 使用官方的样式绑定比较繁琐,它的css的键通常和&lt;style&gt;中的键的写法不一样导致无法再界面上呈现出来,还以为官方的样式绑定不能使用。 &lt;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等标签 同理
  • "del(m.id)" > 删除 < / button > < / td > < / tr > < / table > < / div > < / template > < script > export default { data ( ) { return { message : [ ] } } , methods...
  • Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究 在github上阅览README.md以获得最佳阅读体验,点这里 v-for响应式key, index及item.id参数对v-bind:key值造成差异研究 实验背景 ...
  • v-model="currentComponent['prop' + currentComponent.id]" currentComponent 是动态值,如:0-1-2-3 这样只能 currentComponent.prop0='123' 这不是我要的效果,我要的效果是currentComponent.prop0.num='...
  • 页面如下: &lt;template&gt; &lt;div :id="objId" class="randomBoxDiv"...其中,div的ID是动态绑定的。 JavaScript代码如下: &lt;script&gt; export
  • Android view的绑定方法

    千次阅读 2022-03-23 14:00:08
    优点使用简单通过一个BindView注解,传入一个Resource Id就能轻松获取到Id对应的View,缺点是gradle5.0以后无法再被使用,重点是ButterKnife正在被慢慢弃用。 3、ViewBinding:Google官方正在大力推广的View
  • 一、绑定软件设备号,即idVendor和idProduct(适用于不同生产商生产的不同USB串口) 1.lsusb 查看自己的USB串口ID。我的USB串口是0403:6001 2.vim /etc/udev/rules.d/myusb.rule 按 i 进入插入模式 KERNEL==&...
  • 点击表单的档案组,弹出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, 1.当选择用户选择name时,获取id值 2,当用户输入值时,与数据源的name进行匹配,匹配成功则,获取相应id,否则提示用户没有该数据,,怎么做 dataset dscommon ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 790,429
精华内容 316,171
关键字:

如何绑定id