组件方式开发todolist

admin

. v( q  }) S& Q2 x- b
! [/ B2 X1 L% T

<template>
  <div id="App">
    <input v-model="inputValue" />
2 I' _& v7 n1 \/ D9 c) R9 w    <button @click="submit">Submit</button>
' G7 t! b4 c+ ~  S: w. k# S    <ul>
* |  f( p9 a- c7 Y& T; q1 r      <todoItem
        v-for="(item,index) in List"
% W4 e9 @- f' `, c$ z        :key="index"
        :content="item"
$ H" H4 M2 q+ _  n7 W  L0 u        :index="index"
( |/ D% |9 J$ ?1 F% Y9 \        @delete="handleDelete"
      ></todoItem>
    </ul>
( c- D( j# q/ k" e2 ^' f1 ]  </div>
</template>
) w: d6 v+ N: o, j7 E# Z
<script>
1 Q4 }( y) A( C# p, J" ^8 wimport todoItem from "@/components/item.vue";

0 ]. i8 z9 y" }5 v& Y# z: m8 xexport default {
  data: function() {
    return {
      List: [],
      inputValue: ""
3 V# S$ w/ R% S# @$ G7 F    };
- Z1 u" L( P! g& `  },
  components: {
0 O& G# G1 Z# H1 q  g+ e    todoItem
( l$ m" y" K5 w  },
$ q5 ^8 k' p3 ]. M, H  methods: {
: ~' U- s  c) |+ O    submit: function() {
7 ?1 w" w' \, M, y      if (this.inputValue != "") {
7 i" K0 O& Y' n        this.List.push(this.inputValue);
2 s# a5 h' E; O0 S- t4 p" Q/ z      }
      this.inputValue = "";
7 `; a5 Y/ `6 f8 A3 b. ]$ e    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
) {( t$ T! a: ]6 c/ b    }
# y5 C; f( j* f. j# N6 l  }
};
</script>
: v8 F# |* S7 B2 ]
6 P$ k  g- r8 R& J+ `' M2 x
6 G8 `- ^! f' s

% Q; k. w/ o$ S- X


4 O9 y" N# O1 `9 y4 ]<template>
  <li @click="deleteItem">{{content}}</li>
</template>
$ P2 f8 Z' C2 u- @
<script>
2 v, A6 w) T+ o% }3 s1 Aexport default {
  props: ["content", "index"],
' F5 S- |6 y! K1 R2 }  data: function() {
    return {};
  },
  methods: {
    deleteItem: function() {
7 C8 j8 G( v3 m7 N! U      this.$emit("delete", this.index);
! Y+ C0 D! Y9 ]  E! E; U6 p    }
- L; _8 z, H1 J4 A  }
9 ^) Q: U! \; @+ S/ @8 \' Z$ ^};
</script>
! Y: Y+ D* i1 q' \% E' b( q
9 a6 x, h2 M- w3 [! K
% ^+ t& [& t" w- e4 p* S
8 A% x) O4 {& Q- f1 o2 {