组件方式开发todolist

admin

% u( }' ]  |: z+ U5 W" K7 T8 r

5 X5 Q6 l* f& V( T1 d8 t3 {
<template>
4 R8 T# v% R, O3 B  <div id="App">
- M9 Z' E" x: c% y    <input v-model="inputValue" />
6 @6 z5 D0 u# b9 J$ [2 `0 q1 b3 Z* T    <button @click="submit">Submit</button>
; m7 D4 X/ T. @' S5 h    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
' ~( Z6 r0 S1 s. _$ i4 R& _        :content="item"
0 r1 @$ }/ ]9 p: f3 `5 |        :index="index"
9 e4 u  ^$ Z/ u( B9 g. Y5 B' n7 k        @delete="handleDelete"
      ></todoItem>
& ]% e0 R# R: ?. e3 g    </ul>
8 U1 a/ h9 _$ i" \0 S  </div>
' O' f. o6 a8 {# `1 F</template>

/ Q9 W. I9 a, T: _" V: X<script>
import todoItem from "@/components/item.vue";
) H8 _* y: l' I
1 i4 b5 |3 B% }5 P# jexport default {
0 Z& H' _5 c  |  L- D) D  data: function() {
    return {
      List: [],
      inputValue: ""
& ?5 Q0 s3 T2 @/ i    };
  },
6 Q; Z0 z: ]5 B# z  components: {
) n  O; K+ J2 M7 C5 G  n    todoItem
! W$ T! o$ L& @0 C/ e, t0 x  },
  methods: {
    submit: function() {
      if (this.inputValue != "") {
$ i7 r! ~( ?/ |/ T. y        this.List.push(this.inputValue);
% e: {$ u( `$ S3 `% H' D3 b      }
      this.inputValue = "";
8 s4 K* C5 Q5 I" y4 p5 `* y8 a% N    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
};
: f& w' o1 a3 b" k" s8 J</script>

$ B( h7 @& D, Z' v: B( p0 |



# ~4 A, p) t8 \0 t# i4 z
( E+ L3 A& p3 |
<template>
  <li @click="deleteItem">{{content}}</li>
</template>
/ d! e- r$ U; }; o5 S1 l# @& I
6 p/ x, x, B+ o9 Q<script>
7 l( r9 x+ P! @2 |, Vexport default {
  props: ["content", "index"],
  data: function() {
    return {};
# R9 d% \! i( u8 v9 O+ G6 C  E  },
' u; }' H* g* w8 r& c1 \  methods: {
8 `& u" H: A/ d& p    deleteItem: function() {
      this.$emit("delete", this.index);
    }
3 v3 x. {% @2 G+ `  }
  C  j/ K" }9 b' p};
/ o7 r- h6 z6 q$ s) @</script>
, F; R' h7 X* Z5 a5 Z
, J' X( Q; M! U' f4 V
. q- G* D6 `8 Z1 \( M4 P