JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <div class="block" v-for="i in evenNumbers">
      {{i}}
  </div>
</div>

SCSS

#app {
  display: block;  
  padding: 1rem;
}

.block {
  display: block;
  float: left;
  border: 1px solid #000;
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
  line-height: 1.5rem;
  font-size: 1.5rem;
}

JavaScript

const vm = Vue.createApp({
  data () {
    return {
      numbers: [1, 2, 3, 4, 5]
    }
  },
  computed: {
    // 只顯示偶數
    evenNumbers () {
      return this.numbers.filter(number => number % 2 === 0);
    }
  }
}).mount('#app');