组件方式开发todolist

admin

% \, ^9 U9 f# a1 e( y
- ?% x" [2 n* c3 _8 b4 b3 X

; N1 ~. S3 q7 w0 d<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
! M% N! ]+ j- d4 n% ]% I" f9 h' C. ?    <ul>
* G8 U0 N7 d1 \2 f; O      <todoItem
8 [# q2 n7 b4 U8 G3 t/ u; r        v-for="(item,index) in List"
: _$ j) o" L1 ~7 A3 A        :key="index"
8 e% v6 t0 V; O/ u: u; Z        :content="item"
( G* ^3 }2 \6 t: Y' J; h, |        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
" u4 |4 M) _/ _+ ?+ X! B  </div>
</template>

<script>
import todoItem from "@/components/item.vue";

. w. C$ k- }( Z& T; O% K! a7 |: p6 Xexport default {
: R0 _! F: a' Q( |  data: function() {
    return {
      List: [],
      inputValue: ""
" q( r) c& X& g3 {    };
( @0 X  R) e4 I% E7 s+ x% u! W  },
  N; M  W  M* c: J  components: {
    todoItem
  },
: {0 ~) f) _8 u# H  methods: {
    submit: function() {
$ C4 i& A8 k% L      if (this.inputValue != "") {
2 Z) i, p  d& j1 `/ C        this.List.push(this.inputValue);
      }
- A, P; g9 h7 b      this.inputValue = "";
    },
    handleDelete: function(index) {
* Y0 k0 {  c$ T" I      this.List.splice(index, 1);
    }
  }
};
</script>


+ h3 n& [# J; [




<template>
  <li @click="deleteItem">{{content}}</li>
/ e. B& T+ g+ H. V</template>

<script>
0 Q6 E0 y2 ~, P) b  B7 G$ Yexport default {
  props: ["content", "index"],
  data: function() {
  @$ A* D% p+ p' \# W- ?; }, `    return {};
  },
0 H) @7 [( D0 q" ^1 n; P! W& O5 X  methods: {
. ^- y4 h/ x$ [5 e    deleteItem: function() {
      this.$emit("delete", this.index);
7 R( p5 Y+ G+ H1 E* s    }
  }
};
( X: J. E+ D4 C  g% T</script>
! u; n! D% p* S" I/ q& E


2 `4 C- U+ b# j* M# ^7 k
3 e/ m0 m$ f& {7 F/ y1 b' R. J