VUE簡單實現(xiàn)todolist

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>to do list</title>
    <script src="./js/vue.js"></script>
    <style>
        .clickNow{
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <input type="text" v-model=data>
        <button v-on:click="niubi(items,data)">{{message}}</button>
        <!-- 增加一個點擊事件點擊之后將input中的值放入到列表中并且清空input 列表中的值是在第二個值的items的數(shù)組中的-->
        <h1>{{todomsg}}</h1>
        <ul>
            <li v-for="(item,index) in items" :key="item.message" v-show=todoin>
                {{item.message}} <button v-on:click="addDone(index)">{{btnmsg}}</button><button v-on:click="remove(index)">刪除</button>
                <!-- 點擊按鈕之后崔兴，將數(shù)據(jù)添加到第三個的數(shù)據(jù)中 -->
            </li>
            <li v-for="(prop,count) in props" :key="prop.message" v-bind:style="{ color: 'red',textDecoration:'line-through',cursor:'pointer' }" v-on:click="addTodo(count)" v-show=donein>
                {{prop.message}}
            </li>
        </ul>
        <h1>{{donemsg}}</h1>
        <button v-for="(item,num) in doneitems" :key="item.message" v-on:click="change(num)" :class="num == haha ? 'clickNow':' '">
            {{item.message}}
        </button>
        <!-- 三個按鈕于毙，用num判斷 -->
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '新增',
                todomsg: '列表',
                donemsg: '操作',
                data:'',
                todoin:true,
                donein:true,
                haha:0,
                items: [{
                        message: '珠默朗瑪修電梯'
                    },
                    {
                        message: '南極冰塊搬運'
                    },
                    {
                        message: '帥過彭于晏'
                    }
                ],
                props: [{
                        message: '睡覺'
                    },
                    {
                        message: '吃飯'
                    },
                    {
                        message: '喝水'
                    }
                ],
                doneitems: [{
                        message: '所有'
                    },
                    {
                        message: '未完成'
                    },
                    {
                        message: '完成'
                    }
                ],
                btnmsg: '完成',
            },
            methods: {
                niubi: function (items,data) {
                    // console.log(value1)
                    // console.log(data)
                    if(this.data=="")return;
                    items.push({message:this.data});
                    this.data="";
                },
                addDone:function(index){
                    // console.log(index);
                    this.props.push(this.items[index])
                    this.items.splice(index, 1)
                },
                addTodo:function(count){
                    this.items.push(this.props[count])
                    this.props.splice(count, 1)
                },
                change:function(num){
                    if(num ===0){
                        this.haha=0;
                        this.todoin=true;
                        this.donein=true;
                    }else if(num===1){
                        this.haha=1;
                        this.todoin=true;
                        this.donein=false;
                    }else{
                        this.haha=2;
                        this.todoin=false;
                        this.donein=true;
                    }
                },
                remove:function(index){
                    this.items.splice(index, 1)
                }
            }
        })
    </script>
</body>

</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者