组件方式开发todolist

admin

5 h# U; o5 {4 Y2 s
- |5 {- `4 F" H3 W& l! D' z1 D- G
4 O5 N" f6 U( e8 O% e. n7 f) b
<template>
/ R8 e9 q/ e7 r  @/ g9 {  <div id="App">
9 ]4 I9 U- T% ?3 {5 n0 N% t" s    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
# G2 w2 o0 ~6 Y' v) l$ |        v-for="(item,index) in List"
- t4 ~5 Z# a* z. y        :key="index"
        :content="item"
8 x1 j. Z, y! Y+ `7 @$ `6 H# D        :index="index"
        @delete="handleDelete"
5 V  u2 Q6 M1 w6 u- j, h3 V      ></todoItem>
, ^# _6 w4 e, b" x1 n4 `4 s# t    </ul>
* n  Q  e$ e- q1 [: i  B  </div>
, h% {0 F" M0 W3 G6 p</template>
* G# V+ @" m" r' }' |. r
2 n0 e0 [* A! O; Z, m<script>
) v9 |1 @; |9 a8 r3 n$ x* Z  pimport todoItem from "@/components/item.vue";

2 r: \8 l$ f, Y+ g& J! ~% Dexport default {
1 P0 w( |& H+ c3 s8 X3 k2 @; o# A8 q* i  data: function() {
    return {
- a! C& B+ R: x$ {      List: [],
% X! \8 ~! d- r1 F      inputValue: ""
6 @: f6 D2 w; n0 E    };
  },
) \: x- ^/ K5 @3 K- Z) ~  components: {
    todoItem
4 o7 M; Y+ V8 [. o8 d5 ?+ [2 x  },
. M( Y1 o% O3 `/ [" c  methods: {
1 C( u! B5 a8 L+ _    submit: function() {
      if (this.inputValue != "") {
3 s) ]) |% g) _2 u3 v        this.List.push(this.inputValue);
+ j) R8 c- \# |: i" ?6 U1 h' R1 o  m      }
      this.inputValue = "";
1 o$ @, g  j" {+ v    },
) o- H2 e! U( \' n; U    handleDelete: function(index) {
2 }, `- Y% r+ f( \  f      this.List.splice(index, 1);
    }
' t1 _& s% g6 c2 ~6 p# S& T5 y  }
};
</script>
& x0 E2 W1 w2 u( `8 s




( T2 r: `! c. r% A* U8 V& M

<template>
: f2 v& a- H5 x; a. y  <li @click="deleteItem">{{content}}</li>
! \1 k' @* G* M3 u5 b% z* t</template>

1 p/ T3 u7 c9 [8 [2 p& }<script>
export default {
  props: ["content", "index"],
  data: function() {
    return {};
1 R5 x5 S$ d) F$ h8 b9 I; J/ K  },
  methods: {
6 p/ L% v; q) j. [7 Z0 C    deleteItem: function() {
      this.$emit("delete", this.index);
    }
6 B6 n, F# {) n0 ]( o  }
0 @! _5 N, M, B$ x: d8 ^$ L: i};
</script>

% C( P' _0 G' V1 |  @$ M# y0 |
0 B% w4 ~2 i) l" u+ J
$ P8 ~1 @2 X3 @! i+ d5 J  M6 ]% f, r