初学Vue练手的简易todolist

此简易Demo就不写样式了,主要是熟悉Vue的指令


功能:添加、删除待办事项
初学Vue练手的简易todolist_第1张图片


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>todolisttitle>
    <script src="vue.js">script>
head>
<body>
    <div id="root">
        <h2>简易todolistDemoh2>
        <input type="text" v-model="inputValue"/>
        <button @click="handleSubmit">提交button>
        <p>待办事项:p>
        <ul>
            <todo-item v-for="(item,index) in list"
                :key="index"
                :content="item"
                :index="index"
                @delete="handleDelete">
            todo-item>
        ul>

    div>
<script>

    Vue.component('todo-item',{
        props:['content','index'],
        template:'
  • {{content}}
  • '
    , methods:{ handleClick:function(){ this.$emit('delete',this.index); } } }); new Vue({ el:"#root", data:{ inputValue:'', list:[] }, methods:{ handleSubmit:function(){ this.list.push(this.inputValue); this.inputValue = ''; }, handleDelete:function(index){ this.list.splice(index,1); } } });
    script> body> html>

    你可能感兴趣的:(Vue)