如何在Vue.js与EJS环境下给HTML标签的id属性插入动态变量

Vue.js 环境实现 #

在Vue中需要使用动态属性绑定语法（v-bind: 或简写 :）来实现id的动态拼接，有两种常用写法：

• 模板字符串写法（更直观）

<!-- 分页v-for循环场景示例 -->
<div 
  v-for="(pageItem, i) in totalPage" 
  :key="i"
  :id="`page-box-${i + 1}`"
>
  第{{i+1}}页内容
</div>

• 字符串拼接写法

<div :id="'page-box-' + (i + 1)"></div>

注意：不要直接写id="page-box-{{i+1}}"，该插值语法在Vue 2.x及以上版本的属性绑定中已废弃，必须使用v-bind绑定动态属性。

EJS 模板环境实现 #

EJS中直接使用模板输出标签<%= %>包裹计算逻辑即可，渲染时会自动将计算结果插入对应位置：

<% for(let i = 0; i < totalPage; i++) { %>
  <div id="page-box-<%= i + 1 %>">
    第<%= i + 1 %>页内容
  </div>
<% } %>

以上两种写法当i取值为2时，最终渲染的id都为page-box-3，可满足分页场景的需求。

内容的提问来源于stack exchange，提问作者shinbian11