vue.js vue v-for循环遍历如何动态绑定id

女爷i 2022-02-23 09:03 960阅读 0赞

### ***html页面的代码如下*** ###

<body>
        
        <div id="allli">
    <ul v-for="(item,index) in sites">
    <li>{
       {item.name}}</li>
    <li :id="step(index)" >
    <img :id="step(index)" src="circle.png"  @click="cf(index)"  />
    </li>
    </ul>
    </div>
    
    </body>

**注意**

**1、****v-for="s in sites"和v-for="(item,index) in sites"都可以遍历出数据，****但是前者显示不出Index**

**最重要的是，****你选择了后者的话，必须是(item,index),如果是(s,index) in sites的形式就错了****，虽然控制台不会报错，但是遍历不出数据**

**2、遵守vue的格式**

***正确格式如下***

<img :id="step(index)" src="circle.png"  @click="cf(index)"  />

***错误格式如下***

<img id="step(\{ \{index\}\})" src="circle.png"  @click="cf(\{ \{index\}\})"  />

3、*标签和**:**之前有**空格***

***4、如果绑定动态的id的话，那么这个方法step，必须写在vue的methods里面，不然不生效***

### ***js代码如下*** ###

<script>
    var ncheck="circle.png";
    var ycheck="checkedcircle.png";
    new Vue({
    el:'#allli',
    data:{
    	sites: [
          {id:01, name: '田江南' ,num: '23',sex: '女'},
         {id:02, name: '田智慧' ,num: '27',sex: '女'},
         {id:03, name: '程梓衿' ,num: '2',sex: '女'}
        ]
        },
    methods:{
    cf:function(c){
    alert(c);
    		},
    step:function(i){
    			return "step" +i
    		}
    
    }
    });
    
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，960人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 动态样式绑定

1. 简介本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完

迈不过友情╰/ 2024年03月27日 08:47/ 0 赞/ 178 阅读

相关 vue动态绑定class

Vue.js 允许您使用 v-bind 指令或简写的 : 来动态绑定 class 属性。这允许您基于某些条件为元素添加或删除类名，从而实现动态样式控制。以下是一些示例：动态

╰+攻爆jí腚メ/ 2024年02月21日 10:35/ 0 赞/ 93 阅读

相关 vue 动态绑定placeholder

前言：当placeholder的值不唯一时，就可以动态绑定placeholder ![在这里插入图片描述][20201130155335620.png] <div

一时失言乱红尘/ 2022年12月25日 04:50/ 0 赞/ 248 阅读

相关【vue】vue循环遍历

> `前言` 转载：[https://juejin.cn/post/6844903814030426125][https_juejin.cn_post_68449038140

骑猪看日落/ 2022年12月25日 04:00/ 0 赞/ 412 阅读

相关 Vue 循环绑定value

就是 :value=“xxx” 就这样其他别看了妈蛋…… <template v-for="(item,index) in list"> <div cl

心已赠人/ 2022年05月13日 04:54/ 0 赞/ 247 阅读

相关 vue基础：数据绑定，绑定属性，循环渲染

<template> <div id="app"> <h2>你好vue{ {msg}}</h2>/数据绑定/

傷城~/ 2022年03月25日 06:46/ 0 赞/ 402 阅读

相关 vue.js vue v-for循环遍历如何动态绑定id

html页面的代码如下 <body>  <div id="allli"> <ul v-for=

女爷i/ 2022年02月23日 09:03/ 0 赞/ 961 阅读

相关 vue v-for循环回来的数据动态绑定id

v-for循环遍历html页面的时候，希望绑定的id可以是step0,step1,step2,step3这样的，如下图所示 ![watermark_type_ZmFuZ3po

灰太狼/ 2022年02月22日 21:20/ 0 赞/ 356 阅读

相关 vue 动态绑定 id

<div class="layui-tab-item" :class="{ 'layui-show': key === 0}" v-for="(cur, key) in

太过爱你忘了你带给我的痛/ 2022年01月27日 00:07/ 0 赞/ 1001 阅读

相关 vue动态绑定class

<li v-for="(item,index) in processOptions" class="process-list-item" :class="{ ' is-

╰+哭是因爲堅強的太久メ/ 2021年07月25日 20:53/ 0 赞/ 607 阅读