组件方式开发todolist

admin

! ~5 M! n3 d7 N3 a1 Q) I

# {* S# F% U4 N! Q3 l8 d. ?0 P
# U* O: |0 y( h# K<template>
6 F& p+ a, n! x9 h# _) t  <div id="App">
5 _/ @1 B  v2 o1 b$ ^0 r' S    <input v-model="inputValue" />
. w  @' ^" J4 n! @5 C    <button @click="submit">Submit</button>
    <ul>
, S5 Z, v& f  d2 r* Q      <todoItem
        v-for="(item,index) in List"
        :key="index"
9 y! w! S, R) Y/ M9 Y! w% P* `        :content="item"
        :index="index"
        @delete="handleDelete"
7 O: g  V( [2 B( D. X/ e% }# g      ></todoItem>
    </ul>
  </div>
8 e8 u7 f- g8 e% |6 R</template>

<script>
import todoItem from "@/components/item.vue";
! \9 K8 Y/ I* L% ]9 l
export default {
  a6 j/ R1 l( e" l/ ^0 ?' @! ^  data: function() {
8 D" t# L4 |9 ?, s* D3 N6 W- \2 v    return {
      List: [],
      inputValue: ""
! ^* \3 b% e: C  Q- ]0 z    };
  },
6 c* y" f4 R) c5 }" O  components: {
    todoItem
+ M$ [0 ^: x. U) i" a1 a  },
  methods: {
    submit: function() {
      if (this.inputValue != "") {
. X- h7 R. ?" C9 F7 f; z        this.List.push(this.inputValue);
      }
7 n4 G. }/ w( H# l* T      this.inputValue = "";
    },
    handleDelete: function(index) {
7 N2 a( w( i' t, n% z6 w      this.List.splice(index, 1);
( U1 m$ Z+ H# Q7 Y! z) y    }
  }
};
% {% m; a/ W( b! ~) C</script>



) ]! `. U: H* Y6 v* i7 h

7 D2 }/ e' f& l8 K

<template>
  <li @click="deleteItem">{{content}}</li>
' I6 x7 D! |$ W1 F</template>

<script>
export default {
) m0 j% }, K! E/ C! ]6 m* N  props: ["content", "index"],
2 f% A  Q$ J4 S1 ^' ^9 M8 m1 j  data: function() {
% z" I+ r! S" b5 g9 K    return {};
  },
) `- v5 q0 {; t2 M- f  methods: {
& g: r0 b. ?* I$ I: _& w0 T" _    deleteItem: function() {
      this.$emit("delete", this.index);
    }
. z6 t( [8 p7 \& T" j  }
};
</script>
" f( ]  ~6 u; b/ U

2 C2 Q$ s  t, u4 k& B, l