JSFiddle - React, Tailwind, and code Playground

by imall

HTML

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script>
    <div id="app">
      <div class="false">
        <h1>尚未完成的清單</h1>
        <ul>
          <li v-for="lst in notCompleteList">
            <label>
              <input type="checkbox" v-model="lst.isComplete">
              {{lst.title}}
            </label>

          </li>
        </ul>
      </div>
      <hr>
      <div class="true">
        <h1>完成的清單</h1>
        <ul>
              <li v-for="lst in completeList">
            <label>
              <input type="checkbox" v-model="lst.isComplete">
              {{lst.title}}
            </label>

          </li>
        </ul>
      </div>
    </div>

CSS

* {
            margin: 0;
            padding: 0;
        }

        .outer {
            background-color: #ccc;
            height: 100vh;
            position: absolute;
            inset: 0;
            margin: auto;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: #fff;
            position: fixed;
            inset: 0;
            margin: auto;
        }

JavaScript

Vue.createApp({
            setup() {
                const list = Vue.ref([
                    {
                        title:'讀完 Vue 的書',
                        isComplete:false
                    },
                    {
                        title:'讀完 JS 的書',
                        isComplete:false
                    },
                    {
                        title:'整理筆記',
                        isComplete:false
                    },
                ])
                const completeList = Vue.computed(()=>list.value.filter((item) => item.isComplete===true))

                const notCompleteList = Vue.computed(()=>list.value.filter((item) => item.isComplete===false))
                
                return { completeList, notCompleteList};
            },
        }).mount("#app");