vue实现简易todolist

<!DOCTYPE html>
<html>
<head>
    
    <title></title>
    <div id="box">
        <input type="text" name="" v-model="todo" placeholder="this is todolist" @keyup.13 = "addToDo">
        <ul>
            <li v-for="(item,index) in items">{{item}}<span @click="delteToDoList(index)" v-bind:style="objStyle">&nbsp;删除</span></li>
        </ul>
    </div>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#box",
        data:{
            items:[],
            todo:'',
            objStyle:{
                color:"red",
cursor: "pointer"
            }
        },
        methods:{
            addToDo(){
                if(this.todo !=""){
                    this.items.unshift(this.todo);
                    this.todo = ''
                }
            },
            delteToDoList(index){
                this.items.splice(index,1)
            }
        }
    })
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容