组件方式开发todolist

admin

1 V; j1 ~- P2 Y3 V; k

( h6 q7 ^: }4 s8 ?7 s# d<template>
0 z" r2 l) z' V. S2 s: I' J  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
! n% O& t4 G- m& X# P        :key="index"
& y: h1 o& R( L" l        :content="item"
        :index="index"
        @delete="handleDelete"
% @0 ^3 O% D1 N      ></todoItem>
6 V5 x& L: x% K! C' e; N/ x4 x' U    </ul>
  </div>
</template>
/ y" Q) q# y% Z0 c8 X
<script>
import todoItem from "@/components/item.vue";
: E- V0 @8 z; {
' S0 k: R7 G% _& xexport default {
  data: function() {
% V# s" _9 l4 m* d/ p/ j7 a    return {
/ m! {9 Q3 z/ w, l) W      List: [],
      inputValue: ""
  m4 i% x/ S  d) H    };
  },
  components: {
8 _+ H* J1 X' G8 R6 L    todoItem
  },
. m. h# b: J- u( E  methods: {
" S# Z  b/ ~% m+ p1 e0 L    submit: function() {
/ t* P. c' D; S. p6 I1 _7 u; f+ s      if (this.inputValue != "") {
        this.List.push(this.inputValue);
2 S- \  C) A5 V$ B      }
- C! @. V) E0 c8 }7 s- ^+ {      this.inputValue = "";
& w$ x* _6 ]5 A- _5 H) j1 ]3 |    },
    handleDelete: function(index) {
7 T  A& b2 h7 n3 p* S! M- E, ~! D      this.List.splice(index, 1);
    }
  }
+ C. V3 @5 Z4 I$ m# C4 o  [};
- |' x% Q# ^3 L8 g- M2 z7 z4 u</script>
3 \  H) [. i- H. i) G! t$ ]% Y; ^
' c" q* {7 u: p& \! u! I- v


5 [) e$ q& S" ~4 g: k$ K: Z

, `5 T  ~0 K1 S. a! _8 Q' x  ~: d  f% E
3 O# M" x* R4 Z( n$ U<template>
1 v3 g& O- M1 s* ?- v; d  d* w  <li @click="deleteItem">{{content}}</li>
8 O! T) z9 q! T. k. |$ ?</template>
* D) F7 F' \  r. A2 N$ I
& V# \" o  @( j<script>
export default {
  props: ["content", "index"],
  data: function() {
    return {};
  },
$ Q; D5 }. i# G+ p/ |% X  methods: {
, n7 E3 E) C" k$ a5 Y; A; ^    deleteItem: function() {
      this.$emit("delete", this.index);
    }
! q* v! K& d3 r! Y' [! Z! U7 J  }
};
- P; a+ ?; n: D3 ^$ |2 \</script>



# y+ }2 Q! w+ Z% G2 F' M! X' x