组件方式开发todolist

admin

<template>
  <div id="App">
    <input v-model="inputValue" />
0 w, I# b. a' f/ t! L3 o4 O    <button @click="submit">Submit</button>
    <ul>
1 _6 H8 u/ x& N& Y& X+ r6 ?      <todoItem
2 q( l1 m0 F$ {) Q' k2 ]+ `        v-for="(item,index) in List"
        :key="index"
6 X! z) Q& p; {& o        :content="item"
1 p6 v6 ?+ T$ y( B7 A        :index="index"
5 l1 q+ Q8 H0 b: Z( y        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
</template>

<script>
( n! m$ Q3 h5 P: Y% Pimport todoItem from "@/components/item.vue";
- C/ E% {( }& o8 p* f7 x
6 Q; X2 s" Q. Zexport default {
' K+ E; v8 D8 T1 |$ v) Y  data: function() {
. H+ l* v& V0 [! @    return {
% c6 E" i# b% r9 S/ z  n; t      List: [],
      inputValue: ""
    };
* E7 U, l+ Q3 D1 v+ |; E# ?  },
  components: {
* N4 x& h" [$ J6 U7 _    todoItem
  },
; m* M% _& I" U, J. n  methods: {
3 T' w; b- W( `% l* I! j    submit: function() {
      if (this.inputValue != "") {
( x5 c, N! d$ Z8 d2 K& \        this.List.push(this.inputValue);
4 L) g0 s3 l& g* U& f      }
8 w( [* H5 P7 W3 o# Q$ F/ c! K- g      this.inputValue = "";
    },
    handleDelete: function(index) {
" G; ]9 s$ h+ L7 n6 L, M      this.List.splice(index, 1);
    }
  }
};
</script>


- D; F- Q9 b; \% \6 D8 a+ i5 W  c) ]



' B+ a' @; ^) e% p! Q8 N7 |
3 P8 l. k/ G: e* ]<template>
  <li @click="deleteItem">{{content}}</li>
7 x$ z% g" R& X! H7 ?  N</template>
7 ]' \, V& A' F, S% ?/ \1 n3 T8 i$ U
' V. P+ e; _& z' w4 G<script>
export default {
$ |( w: F1 u. [+ F  props: ["content", "index"],
9 }1 ?- Q# ?- n, g' P/ p. S  data: function() {
; }; d( w: S! j    return {};
# _' |- u5 j/ w  },
  methods: {
( ?# N/ N; e+ G6 T; ^6 n9 m8 \& ]    deleteItem: function() {
- T! ]8 f& f1 P0 d      this.$emit("delete", this.index);
    }
  }
, ]7 Y4 o* [; x};
6 |% n& ^; E, \# j</script>



6 k2 Q3 s# k6 Q
/ E+ e: b7 E7 x# B9 D