如何使用Vue.js按当月天数克隆指定HTML标签？

你现在的问题出在用原生DOM操作来创建带Vue指令的元素——Vue的:class、v-on:click这些都是模板语法，并不是标准HTML属性，原生JS设置这些属性后，Vue根本不会去解析它们，所以指令完全不会生效。而且手动操作DOM也违背了Vue数据驱动的设计理念，这可不是Vue的正确打开方式😉

最简洁高效的方式是直接在模板里用v-for循环生成对应天数的<td>，完全不需要手动操作DOM。

模板代码 #

<div class="cells">
  <td 
    v-for="day in nbDaysInMonth" 
    :key="day"
    class="day noclass" 
    @click="workedDay(day)" 
    :class="{ active: isActive(day) }"
  >
    {{ day }} <!-- 可选：显示日期数字 -->
  </td>
</div>

代码说明 #

• v-for="day in nbDaysInMonth"：直接根据当月天数循环生成每个<td>，day是当前循环的日期数字（从1到nbDaysInMonth）
• :key="day"：给每个循环项加唯一key，这是Vue列表渲染的最佳实践，能避免渲染错误
• @click="workedDay(day)"：Vue的简写语法，等价于v-on:click，同时把当前日期传入点击方法
• :class="{ active: isActive(day) }"：通过方法判断当前日期是否激活，这样能精准控制每一天的状态（如果你的激活状态是全局的，也可以直接用变量，但日期场景通常是单天激活，传参更合理）

对应的组件脚本示例 #

export default {
  data() {
    return {
      nbDaysInMonth: 30, // 实际可通过日期API计算当月天数
      activeDay: null // 记录当前激活的日期
    }
  },
  methods: {
    workedDay(day) {
      this.activeDay = day; // 点击时更新激活日期
      // 这里添加你的其他业务逻辑
    },
    isActive(day) {
      return day === this.activeDay; // 判断当前日期是否处于激活状态
    }
  }
}

如果因为特殊场景必须手动创建元素，绝对不能用原生setAttribute来加Vue指令，得用Vue的API编译挂载：

// 在Vue组件的方法中执行
createTdElements() {
  const cellsContainer = this.$el.querySelector('.cells');
  for (let j = 1; j <= this.nbDaysInMonth; j++) {
    // 1. 编写Vue模板字符串
    const template = `
      <td class="day noclass" @click="workedDay(${j})" :class="{ active: ${j} === activeDay }">${j}</td>
    `;
    // 2. 编译模板
    const { render, staticRenderFns } = this.$options.renderer.compile(template);
    // 3. 创建临时组件实例
    const comp = new Vue({
      render,
      staticRenderFns,
      methods: {
        workedDay: this.workedDay
      },
      data: {
        activeDay: this.activeDay
      }
    });
    // 4. 挂载组件并获取DOM元素
    const td = comp.$mount().$el;
    // 5. 添加到容器中
    cellsContainer.appendChild(td);
  }
}

但这种方式非常繁琐，还容易出现数据响应式问题，强烈建议用v-for的方式，这才是Vue的正确用法。

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