vue学习（二）做一个简单的toDoList

男娘i 2022-04-22 07:50 188阅读 0赞

一，最直接的代码

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;To do List&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="app"&gt;
        &lt;input v-model="content"&gt;&lt;/input&gt;
        &lt;button @click="add"&gt;添加&lt;/button&gt;
        &lt;ul&gt;
            &lt;li v-for="(item,index) in toDoList" @click="deleteButton(index)"&gt;
               {
       {index}} ---- {
       {item}}  &lt;button @click="deleteButton(index)"&gt;删除&lt;/button&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;script&gt;
    var app=new Vue({
        el:"#app",
        data:{
            content:'',
            toDoList:['apple','pear','orange']
        },
        methods:{
            add:function () {
                this.toDoList.push(this.content);
                this.content='';
            },
            deleteButton:function (index) {
                this.toDoList.splice(index,1);
            }
        }
    })
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

二，组件化代码

&lt;div id="app"&gt;
        &lt;input v-model="content"&gt;&lt;/input&gt;
        &lt;button @click="add"&gt;添加&lt;/button&gt;
        &lt;ul&gt;
            &lt;todo-item :item="item" :index="index" v-for="(item,index) in toDoList" @deletebutton="deletebutton"&gt;&lt;/todo-item&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;script&gt;