组件方式开发todolist

admin

+ [5 F: h: O+ h, l


7 Q, c9 j/ v/ w5 G0 S/ I# n<template>
  <div id="App">
; K& W% e6 w0 ^3 ~    <input v-model="inputValue" />
" R3 g$ n) n6 T    <button @click="submit">Submit</button>
    <ul>
6 @2 G6 E. l. u9 h' E      <todoItem
1 T8 a2 l+ h9 y        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
4 H  }+ @- u: y& g1 [  c        @delete="handleDelete"
      ></todoItem>
    </ul>
, N- k- Z& a$ Z4 c2 e& F  </div>
3 K5 e. Z& M3 _7 c/ f7 t</template>
9 G" C( v; x( K% y/ {( F- }
% X& }4 a2 S% z! m0 J! m- _<script>
) j' e' H+ c) `& @& s$ w" |8 Himport todoItem from "@/components/item.vue";

2 x  f; S" i. R, vexport default {
! A+ }$ Z& y, R! L8 T: X  data: function() {
    return {
      List: [],
: t3 ]: I: D8 w' w      inputValue: ""
    };
' o4 {# X' Z1 i* ]1 ?3 `, i  },
  components: {
" [3 @9 k6 t: B& s    todoItem
  },
$ k; F) J3 R: S  methods: {
    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
2 X& R* e. T4 I, ^      }
      this.inputValue = "";
# L; u/ c0 H$ v. C4 m    },
    handleDelete: function(index) {
- p3 x0 V% C* G. c# J      this.List.splice(index, 1);
9 W3 R- {/ C. V% U    }
  }
};
</script>
* o) f& Q; q2 R$ ~7 _7 O* r
4 c7 a2 I' \# {: i
$ ~2 X( p* g: s. N- N* m' l  i
- O1 U" m' I5 [- h
5 U( v- K+ |9 E) O6 r$ u
% R, M! K9 {9 c" S& {

<template>
$ n' Y* t$ M1 ~3 S6 p# m  <li @click="deleteItem">{{content}}</li>
! z2 f% E* h6 q</template>

. m; _: K6 ]* l  W' R<script>
export default {
  props: ["content", "index"],
  data: function() {
) v# f$ a  v2 N    return {};
) `; G2 @7 V8 L' ]+ `  },
4 |6 e2 V+ z3 u" v% B( ~& H4 j+ H  methods: {
9 }0 i7 z, s% f) U1 Y    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
, c1 q- P4 K  G7 v+ k, q: P};
</script>
) Z$ d" \0 }' V" d. B
7 D+ p. G! t8 u# \( P6 ]2 \! Z1 @
0 Q2 W' B! M& H! Y+ H5 ^