Vue项目01 ListToDo

🚀

是我第一个Vue项目，可以说是梦的起点

<style>
    * {
        padding: 0;
        margin: 0;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<center>

    <h1>ToDoList</h1>
    <div id="todolist"> <input type="text" v-model="getMessage" @keyup.enter="changeList(getMessage)">
        <ul v-show="list.length!=0">
            <li v-for="(v,k) in list" v-if="{index:isTrue+1}">
                <span> {{ k+1+"." }} </span>
                <label>{{ v }}</label>
                <button @click="clearThis(k)">x</button>
            </li>
            <div> {{"总共有"+list.length+"条"}}<button @click="clearAll">清除所有</button></div>
        </ul>


    </div>


</center>

<script src="./HelloVue.js"></script>

let app = new Vue({
    el: "#todolist",
    data: {
        list: ["吃饭", "睡觉", "打洞洞"],

        getMessage: "好好学习天天向上",

    },
    methods: {
        changeList: function(e) {
            this.list.push(e)
            this.isTrueList.push(true)
            console.log(this.isTrueList)
        },
        clearAll: function() {
            this.list = []
        },
        clearThis: function(e) {
            this.list.splice(e, 1)
        }
    }

})