组件方式开发todolist

admin

1 C: b' p% d; ^! B+ g9 H1 P4 Y
# H* T7 I, V5 ?8 i% L" q8 r
  `4 c* V3 H, W* ?2 j0 k
0 c) e0 V6 r. Y) g& i  w<template>
9 a2 G' d* V& d  <div id="App">
4 l0 B) d/ x2 K. K2 e# L    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
; i  S1 ^4 x  Y7 D        @delete="handleDelete"
5 g& U2 n$ |+ w  N8 M      ></todoItem>
! B& I6 B* X$ Q2 v% B    </ul>
  </div>
</template>

<script>
import todoItem from "@/components/item.vue";

% B6 E- o7 i9 y6 hexport default {
  data: function() {
    return {
      List: [],
# T* i+ I3 H0 e& l8 ]      inputValue: ""
    };
  },
$ [% n; v" g' V# D5 e  components: {
    todoItem
/ u2 u+ [7 a8 W4 z3 s8 @8 _) R  },
5 X' P* I* M( r5 }2 [  methods: {
8 |, y0 U. `$ X  i    submit: function() {
5 ^$ Z5 N" w& x% ~      if (this.inputValue != "") {
8 I6 Y* l  L5 y& [4 g        this.List.push(this.inputValue);
      }
      this.inputValue = "";
' M  @& q( |1 m1 ?& F2 F) b8 z    },
    handleDelete: function(index) {
  w7 g( P1 z1 S& N$ |      this.List.splice(index, 1);
6 z$ y5 i8 A; V* [% V( |* c7 }3 b2 h    }
  }
! i: [0 o/ g0 F6 E- V* T};
" a( Z& Y0 w6 b2 r</script>
. o% |& z$ U7 ]% |

4 r* C/ R- k* ?! Y- H$ \




<template>
  Z. Y) d. H6 R  <li @click="deleteItem">{{content}}</li>
</template>

) b1 ?( @* L. b<script>
$ T4 X0 c: |$ L+ pexport default {
  props: ["content", "index"],
( M! @3 C9 k! G) s& |  data: function() {
9 k2 R6 }* {  l4 R; O# u7 O    return {};
  },
* N4 y/ M8 B7 c4 f- X  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
. ~' ]0 H( O! h* A3 @* v  l4 v    }
  }
# o( R' a6 v& A# B};
</script>
9 F' }( i8 U0 h7 k9 n* u* C0 G5 k

/ X# ?" C: a: g; i& X