组件方式开发todolist

admin

# I$ S7 p1 C! b

" P9 g/ o& `1 z4 t8 @
<template>
  <div id="App">
    <input v-model="inputValue" />
( X  ~2 Z( |% h1 v0 @    <button @click="submit">Submit</button>
    <ul>
" S' E% M( \0 \: G# h4 y& j, ~* x+ Z      <todoItem
$ U- T6 J) [5 i! r        v-for="(item,index) in List"
; }/ ?* V. V' Z: l- K6 [        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
, K# _3 b: @: Q, }      ></todoItem>
- R1 |" i! L* {) ~    </ul>
  </div>
</template>
, _. R' s/ `# y4 g$ x) N+ s, {
" D: z8 f+ |: _0 Z5 I# W, R<script>
! @  `  D* ^. N9 D0 {" M$ }import todoItem from "@/components/item.vue";

9 a5 F5 G: U: P6 ~9 Y! Xexport default {
  data: function() {
    return {
      List: [],
      inputValue: ""
    };
+ P( o3 _8 O* P  },
  components: {
7 k# f4 p9 }9 v. y0 F  R    todoItem
  },
8 ^0 n0 O7 c" e  methods: {
    submit: function() {
7 V' Y. ]* B; O8 J9 {  z      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
, A+ a+ [* a2 U3 D9 K& y$ @      this.inputValue = "";
    },
    handleDelete: function(index) {
' J, i- S3 {; v' C7 H( M" [      this.List.splice(index, 1);
    }
  }
9 r' K1 I8 ^/ D/ o) T};
* K2 c3 n% z& T3 k</script>
. [& Y6 i) e% v$ r2 ?
" V& @9 b0 J; L& w5 @; \$ B
9 S8 G2 ]3 L5 r0 N

. w  s. E7 p$ n

! _* h% A9 M# P2 X
+ a$ W+ ~, p" P, u# G<template>
  <li @click="deleteItem">{{content}}</li>
</template>
  L0 x# u4 o  F3 N
! q2 R, x1 ]5 Y6 }0 C) p! \* ]<script>
export default {
  props: ["content", "index"],
  data: function() {
+ [# o+ e: V% x; [! ]  p. f! W    return {};
/ |! {  q1 T# ^, z: n/ Q5 s  t  },
  methods: {
) C1 s0 f7 Y* [! I" x- [2 h: L1 @( }    deleteItem: function() {
      this.$emit("delete", this.index);
8 @2 L5 v; \0 \; ~# D; C0 c    }
* W- i7 B0 Z) t2 a' Z& M* u% ^' z  }
};
5 w+ M' C; @7 s* W: A</script>


# Y! s; w; k6 S