Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <title>Vue.js MVVM Demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        html,body { font-size: 10pt; }
        .op { 
            > * { 
                margin: 2px; height: 1.6em; box-sizing: border-box; vertical-align: middle;
            } 
        }
        table { 
            font-size: 9pt;
            width: 280px; border-collapse: collapse; margin-top: 12px;
            td,th { border: 1px solid gray; padding: 2px; text-align: center; }
            td:first-child { text-align: left; }
            th { background-color: #f0f0f0; }
            a { cursor: pointer; text-decoration: underline; color: blue; margin-right: 3px; }
        }
        pre { background-color: #eee; font-size: 9pt; margin-top: 12px; padding: 12px; width: 260px; }
    </style>
</head>
<body>
    <div id="app">
        <div class="op">
            <input v-model="editJob.job" placeholder="待辦事項">
            <select v-model="editJob.catg">
                <option v-for="catgOpt in catgOptions" :value="catgOpt">{{catgOpt}}</option>
            </select>
            <button v-show="editJobIdx == -1" :disabled="!editJob.job" @click="addJob">新增</button>
            <button v-show="editJobIdx > -1" :disabled="!editJob.job" @click="updateJob">確定</button>
        </div>
        <table>
            <tr>
                <th width="120">待辦事項</th>
                <th width="50">類別</th>
                <th width="60">操作</th>
            </tr>
            <tr v-for="(job, index) in jobs">
                <td>{{job.job}}</td>
                <td>{{job.catg}}</td>
                <td>
                    <a @click="editJob = job; editJobIdx = index">修改</a>
                    <a @click="delJob(index)">刪除</a>
                </td>
            </tr>
        </table>
        <pre>{{jobs}}</pre>
    </div>
    <script>
        class Job {
            constructor(job, catg) {
                this.job = job;
                this.catg = catg;
            }
        }
        const app = Vue.createApp({
            data() {
                return {
                    editJob: new Job('', '工作'),
                    editJobIdx: -1,
                    catgOptions: ['工作', '家庭', '休閒'],
                    jobs: [
                      new Job('X專案前端程式', '工作'),
                      new Job('換排風扇', '家庭'),
                    ]
                }
            },
            methods: {
                reset() {
                    this.editJob = new Job('', '工作');
                    this.editJobIdx = -1;
                },
                addJob() {
                    this.jobs.push(this.editJob);
                    this.reset();
                },
                updateJob() {
                    this.reset();
                },
                delJob(index) {
                    this.jobs.splice(index, 1);
                }
            }
        });
        app.mount('#app');
    </script>
</body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers