组件方式开发todolist

admin

$ r. }1 {" o& Q8 e) |

<template>
  <div id="App">
% M5 I6 g' t4 v) p* y& p- I9 V& s1 p    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
; F4 b" |+ W% H9 D      <todoItem
        v-for="(item,index) in List"
        :key="index"
6 I3 W- X8 q, y9 j8 J% j) L9 O        :content="item"
' T( L3 E0 Z/ B/ R        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
) O  D5 ?2 S0 H/ M5 r  </div>
</template>

! ?. s, W# i5 q* Q7 U<script>
import todoItem from "@/components/item.vue";

export default {
  data: function() {
    return {
      List: [],
, q# u/ W% B  [% n1 g      inputValue: ""
    };
  },
  components: {
3 U1 T! D+ z2 f+ |* b& E/ C4 Y    todoItem
4 I: E- \5 B# c  ]: I- V  },
) |. {( K! j* C/ h* d  methods: {
0 q" I8 k; C6 d    submit: function() {
* r- I% n8 W/ N# j) _      if (this.inputValue != "") {
1 u8 _) M: m; n( o( ~( J        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
+ k! Q  Q5 J- D% b! [    handleDelete: function(index) {
! N; ?3 t. S0 R2 ]+ F8 C% W/ M* R      this.List.splice(index, 1);
    }
& L% a, k. g- O9 C+ G. g  }
+ j2 r) B/ R$ T* e8 j};
6 c' D8 U* f) }2 r0 }</script>

2 ]. _  {8 W" {1 }( }

/ ]: a" K2 j( E
) H9 O& ~6 `$ w( b( d. \


<template>
  <li @click="deleteItem">{{content}}</li>
</template>
. ]6 w! x% o7 P
$ O0 {4 p+ L; x. N. \: V<script>
export default {
" k1 K8 K. P5 a/ }  props: ["content", "index"],
1 l- Y/ V8 Z' w# D; t: j  k  data: function() {
; R& M' d$ z# x    return {};
6 F$ V  R! `  ~4 b! R  },
  i9 C5 ?  g$ y- K  methods: {
1 C' O$ z# ]) Q+ [  ?5 I3 g    deleteItem: function() {
1 f8 O; i, }$ X6 n0 r      this.$emit("delete", this.index);
    }
  q8 L  Y+ H7 y" y  }
$ x  x, u% [- X2 Q: {; {% a};
</script>

2 Y; ^) d5 p% c* I& S% M; U. f

$ \8 s" G  s/ ^" V& B! V" t( G