组件方式开发todolist

admin

, K3 V' `) I% J- N$ R
<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
. ?5 ~! a* z' P) \- U% t0 i    <ul>
      <todoItem
        v-for="(item,index) in List"
, ~8 D8 k( D, a( n! }" n$ K, a3 f        :key="index"
        :content="item"
        :index="index"
( @9 V' p$ y8 t6 l9 Y  s! d        @delete="handleDelete"
% y8 z7 {  G3 N0 S4 R9 H8 F; U      ></todoItem>
7 ]: h- a3 n3 z    </ul>
# q  F7 K9 u2 Q( Y9 I  </div>
' G$ _3 T& |( m9 r</template>

2 t3 T( j% W2 P6 O5 u. t3 W, e<script>
; ]) p) x8 m& N: i8 N" k" Rimport todoItem from "@/components/item.vue";
; m" X+ h- j( J7 M* J
export default {
1 p/ o" y6 I% l  h( R- N' O4 X; A5 q  data: function() {
4 D- _# {1 r& {( M    return {
      List: [],
      inputValue: ""
: `* }* G! c0 g+ X( Z* O9 x- U0 l7 b    };
  },
2 a5 B( T& c  A2 l/ l4 c: X# v2 m  components: {
6 {) Z. u; I" }$ D' v' `    todoItem
  },
  methods: {
, v' N6 v7 ~, e4 F& X: ^* L    submit: function() {
& s# t) _" h# u' `      if (this.inputValue != "") {
1 W$ C/ ?1 m( y) t* b$ b4 [        this.List.push(this.inputValue);
" o% x7 G9 t; B  X) S; O2 S      }
& u/ p0 [# R3 X- G# W8 ]$ r      this.inputValue = "";
    },
    handleDelete: function(index) {
- O7 {' d+ Q6 j      this.List.splice(index, 1);
    }
  }
};
</script>

* Y6 A+ M, m# H! T7 R! Y! @
3 V# u( b4 \! l" {; L9 I: u


5 B9 B( w3 `2 K# W: E
4 r5 V/ |! J. U% _1 z+ ~
2 G" }- y# Z7 A. k0 N<template>
5 y- @! ]* \3 M" s. b4 ~# D  <li @click="deleteItem">{{content}}</li>
- L/ ^2 r/ Q' F, A, o+ O5 s/ `</template>
0 d; x! J- B$ b5 l0 a0 s, Q
<script>
2 w" `6 g/ d% z" aexport default {
0 a: G% J/ m: X' o  props: ["content", "index"],
  data: function() {
# P- f$ q* `  z: {" c    return {};
  },
0 i" M. v. L; H  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
. m- E1 Y5 [& [: W6 A  }
* O) V/ U6 Z& `9 I  ~! i};
* X) e5 x. Z# r# R0 {# t7 H5 n</script>


3 l" E( E5 C% _
' @4 {/ _  w" Z7 J' q7 l8 T- ~
: D: B6 T" U5 V) \* \- w