组件方式开发todolist

admin

# J) f7 [3 H% \

<template>
% S2 X. y! I1 V9 v; ~1 _" [, C  <div id="App">
    <input v-model="inputValue" />
. {" T8 y7 |! a& D; |4 j. ~) E    <button @click="submit">Submit</button>
3 d6 p. h8 V* J6 p" m- |: |    <ul>
$ |7 n. l' W. W( t( \( N      <todoItem
        v-for="(item,index) in List"
        :key="index"
# C* P0 e+ [/ l) r" [        :content="item"
        :index="index"
2 u+ R+ v/ h, f0 p6 m        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
' x% }2 F- I' C: Y. m</template>

<script>
import todoItem from "@/components/item.vue";
; T5 f2 S0 x0 I7 O0 o
export default {
  data: function() {
" x: \- C9 l! c$ w    return {
. g1 C* j, v8 ?) l$ g      List: [],
      inputValue: ""
  E- s( j! j- V$ K- L# e    };
  },
) C1 z8 w( l* C$ y: N  components: {
6 O. S' e4 x8 n  W* ^    todoItem
5 e8 [% u" t' r6 i- \  },
  methods: {
2 n- o/ t" G1 j9 O9 Y/ E7 u2 L+ q# o- |    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
) x, M+ n0 v4 t      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
};
6 P! L3 X( a5 v2 q/ W1 ]! E5 [</script>
/ f# Z) F  x2 |



7 C3 Q! m, o6 c' |, D5 T; c


<template>
  <li @click="deleteItem">{{content}}</li>
</template>

: R$ S7 l% x! I" S. W% U: e* H# `<script>
export default {
" n, ?1 ?  t. C3 e4 J, F$ g  props: ["content", "index"],
  data: function() {
    return {};
  },
  methods: {
3 h9 E! W: \6 G5 L" y# d3 Z    deleteItem: function() {
2 S" @0 [' n1 _5 A  y0 J7 P      this.$emit("delete", this.index);
    }
  }
; Y- t- F  l: h) g$ |1 w};
) S1 `# X$ d- s& ~! I: B</script>


! P$ y1 j4 l$ G

% l, B1 R* i: c