组件方式开发todolist

admin

( T' p$ k4 s2 A  ~


<template>
4 N* I) ^# E6 U) y  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
$ p) ?4 R: C' P) P5 e' r  M% C8 [    <ul>
1 S9 m6 ^# ]: M      <todoItem
( K( w  \! G3 P& c7 y7 B        v-for="(item,index) in List"
' \: U* d5 r9 Z( m0 P) f+ R: b        :key="index"
        :content="item"
- y1 U0 v+ x. W! v+ Q: `" n2 [        :index="index"
. R; ~2 B+ Z, ~9 F        @delete="handleDelete"
- g5 V; B- P0 z' y3 q4 j      ></todoItem>
    </ul>
  </div>
</template>

5 r- e, m& [) q1 |<script>
import todoItem from "@/components/item.vue";
. q" ]% n% O8 S4 D5 B! V
3 @! i1 X. j1 R. G( G4 u' hexport default {
% A6 L+ \( ~0 R) C" [3 `  data: function() {
    return {
  o: k( E0 |' w0 B, c      List: [],
# c- D2 K  V# t/ f4 f, k) a      inputValue: ""
    };
  },
  components: {
    todoItem
+ i* O6 U9 Z/ |; P* f  },
  methods: {
8 d+ b: R, j' t( P    submit: function() {
# G0 a; `4 W; W5 ]& c( ]% Z      if (this.inputValue != "") {
        this.List.push(this.inputValue);
* `: F% k, Z6 W8 z0 X      }
) L! X0 T& f1 F  L- K  j4 |      this.inputValue = "";
3 E  `) @- \$ {# i; P5 @* k    },
& v) q$ V' j. r5 O    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
& C& o( T9 E, Z: T! d. h, Y};
</script>


6 D2 n" }2 W5 g* t& _& c

# i, B  R6 ^: q  ~% Z2 G' [) ?7 g
! E, S+ v" k  h" t3 D' s& @* I  @* I
. ^5 s8 |- E; L& X5 X4 b
) G% v. [  ~2 Q5 r8 d, Y: G+ h0 V/ Y<template>
5 V  C6 p0 b9 l- V: m  <li @click="deleteItem">{{content}}</li>
</template>

<script>
! K5 J: n8 e# w; eexport default {
  props: ["content", "index"],
; g/ z4 ?3 ~8 v9 a; u& E  data: function() {
6 s' `# y+ q6 C    return {};
$ f, ?: f9 i4 _) i% m! C9 k  },
1 q9 B7 E% p0 y3 m  methods: {
3 n: `' X& v4 n# o; H& a- m    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
# S" q* Y( T$ r};
</script>

2 s0 e* E+ T% S0 Z! E6 W2 D
, g4 t; K" |& r- @- B% u; v
. S: }1 v! D- T) Z/ y