用vue写待办事件

<template>
    <div>
        <!-- 点击确定添加到数组元素 -->
        <!-- v-model双向绑定 -->
        <!-- 当按键抬起的时候触碰点击事件 语法keyup.enter-->
        <input @keyup.enter="some.push(kw);kw=''" type="text" placeholder="请输入待办事项" v-model="kw">
        <!--kw='' 点完让输入框文字清空 -->
        <!-- disable当输入框输入为空,按钮不可用 -->
        <button :disabled="kw==''" @click="some.push(kw);kw='';">确定</button>
        <ul>
            <li v-for="(val,i) in some" :key="i">
                <span>{{val}}</span>
                <!-- 数组删除splice() -->
                <button @click="some.splice(i,1)">删除</button>
                <button @click="removeSome(i)">事件删除</button>
            </li>
        </ul>
        <!-- 全都删掉之后显示暂无事项 当数组长度为0时显示这个div  -->
        <div class="warning" v-show="some.length=='0'">暂无待办事项</div>
    </div>
</template>

<script>
/* 面试题:data为什么是函数:
组件被复用的时候,每次调用data函数来获取数据,数据是通过函数临时生成的
多个组件之间的数据互相不会影响
*/
    export default {
        // 另一种删除数组元素的写法
        // 方法参数:接收来自html的值
        methods:{
            removeSome(i){
                this.some.splice(i,1)
            },
            kw:""

        },
        data() {
            return {
                some: ["skyline","rain","horizon"]
            }
        },
    }
</script>

<style lang="scss" scoped>
.warning{
    background-color: orange;
    width: 200px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
}
</style>