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>

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue