How to display only certain elements from an array in a v-for loop in Vue JS?

Question

Vue.js

There is a block in which I display sets of blocks. These blocks are created via v-for.
I need all blocks from the array to appear, but only the names of certain elements from the array are displayed:
1, 2, 3, 4, 5, 6 ,7 , 8 ,9 ,10.
All other blocks should be displayed, but their element values ​​should be empty
. How can I do this?
I so understand it is necessary to apply any filter for display?

<div
        class="chars square" v-for="square in squares" :key="square">{{square}}
      </div>

script:

squares: [
          '1', 'a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1', 'i1', 'j1',
          '2', 'a2', 'b2', 'c2', 'd2', 'e2', 'f2', 'g2', 'h2', 'i2', 'j2',
          '3', 'a3', 'b3', 'c3', 'd3', 'e3', 'f3', 'g3', 'h3', 'i3', 'j3',
          '4', 'a4', 'b4', 'c4', 'd4', 'e4', 'f4', 'g4', 'h4', 'i4', 'j4',
          '5', 'a5', 'b5', 'c5', 'd5', 'e5', 'f5', 'g5', 'h5', 'i5', 'j5',
          '6', 'a6', 'b6', 'c6', 'd6', 'e6', 'f6', 'g6', 'h6', 'i6', 'j6',
          '7', 'a7', 'b7', 'c7', 'd7', 'e7', 'f7', 'g7', 'h7', 'i7', 'j7',
          '8', 'a8', 'b8', 'c8', 'd8', 'e8', 'f8', 'g8', 'h8', 'i8', 'j8',
          '9', 'a9', 'b9', 'c9', 'd9', 'e9', 'f9', 'g9', 'h9', 'i9', 'j9',
          '10', 'a10', 'b10', 'c10', 'd10', 'e10', 'f10', 'g10', 'h10', 'i10', 'j10',

        ]

Answer 1

I understand it is necessary to apply some kind of filter to display?

You can also filter:

filters: {
  numberOnly: val => /^\d+$/.test(val) ? val : '',
},

<div v-for="n in squares">
  {{ n | numberOnly }}
</div>

But not necessarily:

<div v-for="n in squares">
  {{ Number.isNaN(+n) ? '' : n }}
</div>

If you know where the necessary elements are located, then

<div v-for="(n, i) in squares">
  {{ i % 11 ? '' : n }}
</div>

Or, if you know the elements themselves:

data: () => ({
  itemsToShow: [...Array(10)].map((n, i) => `${i + 1}`),
  ...
}),

<div v-for="n in squares">
  {{ itemsToShow.includes(n) ? n : '' }}
</div>