组件方式开发todolist

admin

1 \) i$ f1 ?" d/ Y<template>
) W; W$ f3 a) R1 z% k9 _! H+ T  <div id="App">
! L) p3 \, }( y$ n# j+ c( ^1 ]    <input v-model="inputValue" />
. }. Q- G3 \. r& i4 ~  i    <button @click="submit">Submit</button>
; ~6 Y  H4 f6 ?4 J9 X3 U* X, L    <ul>
      <todoItem
        v-for="(item,index) in List"
. m& \7 B: x7 v0 H$ ?/ M        :key="index"
3 h) H; W4 }4 ^' Y# u% y' P        :content="item"
8 [; L" N% S  }0 g) X; i* [  l% G  S        :index="index"
6 D& E: I" I( C0 U+ h        @delete="handleDelete"
5 ]6 R4 x$ @. ~2 v6 V4 M* l5 t      ></todoItem>
7 N7 g1 N3 F: r5 E$ u% D% |- W    </ul>
  </div>
</template>

' x0 f$ ^* Q- p! A( T, C. D" F<script>
import todoItem from "@/components/item.vue";

3 E# q2 S7 r$ T, t) u9 o5 Qexport default {
0 N0 {5 X0 w7 x# ?  data: function() {
" j: ?! W# z9 N" R6 q    return {
* L! t8 i, y" \: o* Y' W2 S      List: [],
      inputValue: ""
    };
+ l7 v* [' m5 D! \4 G( U  },
. Z: |, @; N+ F  components: {
    todoItem
  },
' M5 c5 m' u8 g# c, N  methods: {
6 o. V' t4 a3 m! F" P) [, i& G- \    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
/ e& o( Z: a/ W3 E' r      }
$ d& u  v% g1 F4 d9 ^# r; i4 H      this.inputValue = "";
    },
9 t  ~* B( Z: w' x8 }    handleDelete: function(index) {
( n" T/ h( V6 u, W; F, B3 @) l      this.List.splice(index, 1);
  p% m8 n) {! }( N) p    }
6 |9 B: k* [8 l0 E9 X9 B  }
8 G: c5 ^8 n: Y' A};
  g7 j& h! _" `* N5 M7 X/ D</script>
) O$ f  Y) H% x& ~5 p" I& \


7 j% x9 `+ x4 \8 @) f0 L; B



<template>
( N4 Q+ g& x3 P  <li @click="deleteItem">{{content}}</li>
</template>
, A0 s8 r5 {. p& e1 }4 y7 y
* r; E( F: r- v" S3 \1 T5 c<script>
' C, o, ~8 F5 J6 k- M7 f& Y6 oexport default {
( k9 x! G* B( l) ?1 F+ W  props: ["content", "index"],
- Q, _% Y9 T$ M7 @  data: function() {
# D* g& u0 }* w" @+ t    return {};
  },
  methods: {
6 ?5 h5 ]) Q4 ^4 t' b    deleteItem: function() {
8 q% l, @: e- a* F      this.$emit("delete", this.index);
7 V& W! ]6 R1 L    }
; j5 P0 L1 ~7 @2 \* w  }
};
</script>
" T6 d. K! _+ ^, P# Q

! \$ i( R* o3 V5 y4 k7 g

  n6 g3 X) n" X