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

最新推荐文章于 2024-03-29 20:43:15 发布

qq_37591637

最新推荐文章于 2024-03-29 20:43:15 发布

阅读量1.5w

点赞数 5

分类专栏： vue前端专栏

本文链接：https://blog.csdn.net/qq_37591637/article/details/89072542

版权

vue前端专栏专栏收录该内容

53 篇文章 7 订阅

订阅专栏

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的格式

正确格式如下

错误格式如下

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>

qq_37591637

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
vue.js vue v-for循环遍历如何动态绑定id

html页面的代码如下<body>  <div id="allli"><ul v-for="(item,index) in sites"><li>{{item.name}}</li><li :id="step(index)" ><img :id="st...
复制链接

扫一扫