Vue.js 模板循环中显示当前下标数字+1内容
"<template\ v-for="(symptom, index) in symptoms" :key="index">\n <tr v-if="index % 2 === 0">\n <td class="col1" colspan="2">\n {{ index + 1 }}、{{ symptom.name }}\n \n <td class="col1" colspan="2">\n <JDictSelectTag\n dictCode="symptom_status"\n type="select"\n placeholder="请选择..."\n style="width: 200px"\n />\n \n <template v-if="index + 1 < Object.keys(symptoms).length">\n <td class="col1" colspan="2">\n {{ index + 2 }}、{{ symptoms[index + 1].name }}\n \n <td class="col1" colspan="2">\n <JDictSelectTag\n dictCode="symptom_status"\n type="select"\n placeholder="请选择..."\n style="width: 200px"\n />\n \n \n \n\n\n\n如何使{{ symptom.name }}前面显示的是当前下标数字+1内容:要使{{ symptom.name }}前面显示的是当前下标数字+1,可以使用以下代码:\n\nhtml\n<template v-for\=\"(symptom, index) in symptoms\" :key\=\"index\">\n <tr v-if\=\"index % 2 === 0\">\n <td class\=\"col1\" colspan\=\"2\">\n <span>{{ index + 1 }}、{{ symptom.name }}</span>\n </td>\n <td class\=\"col1\" colspan\=\"2\">\n <JDictSelectTag\n dictCode\=\"symptom_status\"\n type\=\"select\"\n placeholder\=\"请选择...\"\n style\=\"width: 200px\"\n />\n </td>\n <template v-if\=\"index + 1 < Object.keys(symptoms).length\">\n <td class\=\"col1\" colspan\=\"2\">\n <span>{{ index + 2 }}、{{ symptoms[index + 1].name }}</span>\n </td>\n <td class\=\"col1\" colspan\=\"2\">\n <JDictSelectTag\n dictCode\=\"symptom_status\"\n type\=\"select\"\n placeholder\=\"请选择...\"\n style\=\"width: 200px\"\n />\n </td>\n </template>\n </tr>\n</template>\n\n\n在<span>标签中使用{{ index + 1 }}、{{ symptom.name }},其中index表示当前下标,通过加1可以得到当前下标数字+1,并与symptom.name一起显示在页面上。
原文地址: https://www.cveoy.top/t/topic/p1yH 著作权归作者所有。请勿转载和采集!