Vue TodoList 入门 Demo

亡梦爱人 提交于 2021-01-20 07:08:59

// TodoList 实例

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is todo List</title>
    <style type="text/css">
        .isFinshed{font-size: 20px; font-weight: 800; color: red;}
    </style>
</head>
<body>
<div id="app">
    <input type="text" v-model="message" @keyup.enter="itemsPush">
    <ol>
        <todo-item v-for="(item, index) in items" :key="index" :content="item.label" :index="index" @delete="todoListDelete" :class="{isFinshed: item.isFinshed}"></todo-item>
    </ol>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script type="text/javascript">
    Vue.component('todo-item', {
        props: ['content', 'index'],
        template: '<li @click="handleClick">{{ content }}</li>',
        methods: {
            handleClick: function () {
                this.$emit('delete', this.index)
            }
        },
    })
// Vue Instance
    let app = new Vue({
        el: '#app',
        data: {
            message: '',
            items: [
                {
                    label: 'makeing',
                    isFinshed: true,
                },
                {
                    label: 'coding',
                    isFinshed: true,
                },
                {
                    label: 'walking',
                    isFinshed: false,
                },
            ],
        },
        methods: {
// delete element or change element Sytle todoListDelete: function (index) { this.items.splice(index, 1); // this.items[index].isFinshed = ! this.items[index].isFinshed; }, // add new element itemsPush: function () { this.items.push({ label: this.message, isFinshed: false, }); this.message = ''; }, }, }) </script> </html>

  

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!