组件方式开发todolist

admin

2 f0 _1 ]: I- `8 f9 `<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
7 o4 S0 e% X* s* E" s# |      <todoItem
" v* q1 g! }" ]% ?        v-for="(item,index) in List"
. j( ?$ {  o6 Q        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
; n( C5 H* P' }$ G4 ^& b2 r    </ul>
$ W$ Q3 ?" U( I5 j! w  </div>
# @/ i8 d5 Y7 R; e' ?) ~' Y</template>
) |- m' L4 w; h  _) j; U6 N
: B4 Y% T! ]' H/ _<script>
4 c: f0 U) o$ Aimport todoItem from "@/components/item.vue";
( J. [2 I" r4 \  L3 V$ |
" d3 k& P! @5 K2 S  ]export default {
6 b6 Q5 Q4 Y( m  data: function() {
    return {
1 e, S: ^( v9 B' y8 t& G      List: [],
      inputValue: ""
6 a% \; W* v+ D; {    };
  },
, P$ o, X$ c! Q" V  components: {
/ j3 z' Y; t! F    todoItem
  },
  methods: {
0 E& K6 R" x% M/ ~- G- A2 \    submit: function() {
7 o+ V# v5 N/ t) E) w" c3 S      if (this.inputValue != "") {
        this.List.push(this.inputValue);
6 g4 L" N9 d0 V4 }' ~      }
8 \0 k8 {3 ?7 Q0 [- t* r5 x      this.inputValue = "";
- _# m- D* t. D. W! b: s6 X8 f    },
    handleDelete: function(index) {
: W7 Y2 u5 Q; k. k4 y      this.List.splice(index, 1);
! E0 r7 q6 k3 ^% k6 e$ F- F    }
. F5 J$ ?1 z. @' h  }
};
</script>
) g0 U- Z5 Q1 b( G2 K5 Y8 j


4 _: H9 {" H( A! o8 v7 C



5 a3 D) R6 I! b: o" e' l$ [' F<template>
- L2 w2 X* y: D2 t4 `; ^* Q) M  <li @click="deleteItem">{{content}}</li>
" D' Y0 ], w8 n</template>
2 v. e- p$ M' a) R0 Z& d
<script>
! B4 {3 F$ H6 M- Y9 fexport default {
5 i- Y+ D" L$ d0 W  props: ["content", "index"],
  data: function() {
/ ], a1 A2 F5 S    return {};
& k# V+ ~/ D5 T  q$ r* C' w8 Q2 P3 f  },
  methods: {
    deleteItem: function() {
/ P( m3 b. D4 P* z1 m      this.$emit("delete", this.index);
    }
! i. Y6 W+ Q" A6 Q5 c  }
3 n) i. n; `+ f  ~9 n. B};
</script>
- e. B; s/ Z5 }8 e2 c& p( o; ^

$ z; U+ D4 C* Y; M# t- H
% X0 y8 r. z9 B: E: j) Q