vue 实现TodoList

vue 实现TodoList

1. 方法一

head引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

主体

<div id="app">
        <input type="text" v-model=inputValue>//对输入框输入数据进行双向绑定
        <button @click=handleBtnClick>提交</button>//按钮绑定click=handleBtnClick方法
        <ul>
             <li v-for="item in list">{{item}} </li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                list: [],
                inputValue: ' '
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue)
                    this.inputValue = ' '
                }
            },
        })
    </script>

2.方法二 使用全局组件component
主体

 <div id="app">
        <input type="text" v-model=inputValue>
        <button @click=handleBtnClick>提交</button>
        <ul>
            <todo-item :content="item" v-for="item in list"></todo-item>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            },
        })
  Vue.component('TodoItem', {
            props: ['content'],
            template: "<li>{{content}}<li>"
        }) 
    </script>

3.使用局部组件

 <div id="app">
        <input type="text" v-model=inputValue>
        <button @click=handleBtnClick>提交</button>
        <ul>
            <todo-item v-bind:content="item" v-for="item in list"></todo-item>
        </ul>
    </div>
    <script>
        var TodoItem = {//局部组件
            props: ['content'],
            template: '<li>{{content}} </li>'
        }
        var app = new Vue({
            el: "#app",
            components: {//声明局部组件
                'TodoItem': TodoItem
            },
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            },
        })

    

    </script>

实现点击某项即删除

 <div id="app">
        <input type="text" v-model=inputValue>
        <button @click=handleBtnClick>提交</button>
        <ul>
            <todo-item v-bind:content="item" @delete="handleDel" v-for="(item,index) in list" v-bind:index="index"
                :key="index"></todo-item>
        </ul>
    </div>
    <script>
        var TodoItem = {
            props: ['content', 'index'],
            template: '<li @click="handleClickDel">{{content}} </li>',
            methods: {
                handleClickDel: function () {
                    this.$emit("delete", this.index);
                }
            }
        }
        var app = new Vue({
            el: "#app",
            components: {
                'TodoItem': TodoItem
            },
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleDel: function (index) {
                    this.list.splice(index, 1)
                }
            },
        })

    </script>