小编Paz*_*lay的帖子

<template>
  <div class="container">
    <div class="gameboard">
      <div class="title">Game Board</div>
      <div class="main">
        <div
          v-for="item in boardFields"
          :key="item.number"
          :class="{ notclicked: !isclicked, clicked: isclicked }"
          @click="toggleClick(item)"
        >
          {{ item.number }}
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "App",
  components: {},

  data() {
    return {
      boardFields: [],
    };
  },

  methods: {
    toggleClick(item) {
      item.isclicked = !item.isclicked;
    },
  },
  mounted() {
    this.boardFields = [...Array(49)].map((_, i) => ({
      number: i + 1,
      isclicked: false,
    }));
  },
};
</script>

<style>

.notclicked {
  font-size: 3.5rem;
  background-color: …

<template>
  <div class="container">
    <div class="gameboard">
      <div v-for="item in boardfields" :key="item.number">
        {{ item.number }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},

  data() {
    return {
      boardfields: [
        { number: 1, isclicked: false },
        { number: 2, isclicked: false },
        { number: 3, isclicked: false },
        { number: 4, isclicked: false },
        { number: 5, isclicked: false },
        { number: 6, isclicked: false },
      ],
    };
  },

如您所见，我在“boardfields”数组中有一些类似的对象。我必须制作大约 50 个。有没有办法创建一个循环，用不同的数字创建一定数量的这个对象并将其推送到数组，这样我就不必复制和粘贴它并手动更改数字？

我认为在 JS 中它会是这样的

var i;
for (var …

我正在开发一个项目，我希望能够打印页面的特定元素。有一个名为 VueHtmlToPaper 的 mixin/插件，它完全可以实现我想要的功能，但我无法将其导入到我的 Vue 3 CLI 项目中，因为它是为 VueJS2 创建的，并且全局 API 不同。任何帮助表示赞赏。

main.js

import { createApp } from 'vue'

import App from './App.vue'

 createApp(App).mount('#app')

项目结构：