组件方式开发todolist

admin

6 u- }; c. n: a

& M1 {" C  o2 g! H2 G
<template>
  <div id="App">
9 w! U# [' C% Y5 o4 \/ x% E    <input v-model="inputValue" />
/ J+ o* N" e1 w1 P    <button @click="submit">Submit</button>
    <ul>
      <todoItem
4 y& ?' ~2 A- w        v-for="(item,index) in List"
        :key="index"
9 s! \. g; q. F6 B7 |  ]1 [$ z        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
" Y4 {6 C& E/ m% \+ H7 j2 M7 C    </ul>
  [! h% P; J: z  Y  </div>
1 S: U4 R: p4 h+ W+ a</template>

<script>
; f, n: L0 U/ A% @& ?; o. j& Iimport todoItem from "@/components/item.vue";

export default {
5 d3 N: c) ~- Q  data: function() {
$ d; U! t% s  e6 L5 g    return {
      List: [],
      inputValue: ""
7 y3 |, D2 }7 B7 t! m; i/ I" ?    };
  },
  components: {
/ O. Y+ }. W1 w& ^    todoItem
0 E3 n3 o2 @* X3 O5 P  },
% [! A/ R+ R/ Z& y4 v  methods: {
    submit: function() {
- w6 E* E& E! C" z      if (this.inputValue != "") {
        this.List.push(this.inputValue);
! Z0 }9 S8 c' H% K+ q/ H+ p      }
1 q. N" {, f8 h, Q" L      this.inputValue = "";
    },
, H7 N9 S& G4 k) O% z    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
8 H' n& o; F  ?4 y7 x2 R0 P% ]$ K  }
6 s8 r+ b+ H- T1 C" u* o3 S};
" x4 `! F! V9 o& J& \. L# Z</script>

% i; C1 [! K. D, I
+ A  N( ^" D0 L* @; V. v
* t8 y1 u  l- @4 A0 {1 [

# @, \) V6 |# f0 b2 a  Z$ y
$ }/ [- M7 o( q8 s
5 s- U  i9 W' `7 Y<template>
  <li @click="deleteItem">{{content}}</li>
</template>
: e' r: T' q) o6 }7 W! T. u. K% J
<script>
export default {
9 a0 \  K& A2 }0 m! W/ X  props: ["content", "index"],
6 y$ T% m1 G; t. e4 K4 [. s( o  data: function() {
+ d" |& S) G0 s1 f9 J. X8 l    return {};
/ i0 l9 k; z& f6 C/ p  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
5 U. j2 H$ Q5 E2 `; N    }
  }
- [4 |) C+ j" R; n+ W& A$ s};
</script>
4 }, A$ f9 |* C

3 h! I& N2 ^" |- F
$ }& `5 Q* t# b- i7 S  s