组件方式开发todolist

admin

0 X" V; ~4 p8 }6 q


7 v5 j# |" N# ^" v) K' w<template>
  <div id="App">
2 j& ?/ Z% H3 r  Z' X# G5 b. b. p    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
0 n& m6 P( f  J+ x  E6 F- \9 Z    <ul>
8 H. Y. D4 L4 s! U9 Y+ x6 y      <todoItem
( `+ N) P4 o+ l2 H6 M        v-for="(item,index) in List"
        :key="index"
        :content="item"
! }8 o: |  e7 `  Q/ b        :index="index"
  Q3 S, N. G; [( L/ R) [" r0 D        @delete="handleDelete"
) `4 Q8 Y' m# F; N      ></todoItem>
    </ul>
  </div>
</template>

<script>
* |3 ?: v4 f; E; x3 t' limport todoItem from "@/components/item.vue";

: ~5 h8 @9 L1 ]& \  Jexport default {
, l  ?5 ~4 |3 k. }" x* Y  data: function() {
    return {
4 P8 Y: `1 G4 c$ V7 }      List: [],
      inputValue: ""
    };
  },
  components: {
! l- I6 G3 L5 {& P    todoItem
# A  x0 H0 k' A7 Z0 ^  },
, I( E8 H/ J. u+ l, t, @. @  methods: {
0 m7 K% E$ M% q- D+ C; k; C& @    submit: function() {
+ p' d! U8 _; B9 t; q+ H) }+ n      if (this.inputValue != "") {
        this.List.push(this.inputValue);
+ T3 F  t* P. |2 l" t      }
1 ?- E4 Y) K' _) U( P) H      this.inputValue = "";
    },
    handleDelete: function(index) {
- _8 h( W8 S2 g/ d3 }; ^3 i      this.List.splice(index, 1);
( O$ R. T- X! }: ~  {6 j2 ^( l    }
  }
) p' B" g& G! `};
</script>
% i, j1 G3 h( s



5 ^9 c, M8 R" {, R
% H+ `1 |  Y) G" J
4 c9 ]  E4 W0 k5 l
. k5 J% b4 q/ O, O<template>
& |6 M. N" l1 r# u  <li @click="deleteItem">{{content}}</li>
- G) F1 o% J8 x</template>
! E9 ?0 d* @/ A
0 s1 }' @$ E3 t( e) r, w6 `<script>
export default {
  props: ["content", "index"],
: B1 G. S& c0 f6 V  data: function() {
    return {};
  },
  methods: {
    deleteItem: function() {
+ V- l' l+ U, a( p      this.$emit("delete", this.index);
! I: o! j7 E& Z0 |, g3 _    }
5 e6 y9 Q2 W5 G7 v$ n, z. k# Z  }
};
</script>
, r* Z4 b2 s7 y- A8 F8 L: D
1 A0 l( i/ i) f5 I6 f+ f
: t3 B3 X1 @. ^: D) |0 b
* b0 `2 l2 S. \8 y