组件方式开发todolist

admin

3 j/ m0 H: q% }# l* j; b


: P) m. K: V% e7 _2 {<template>
: a- m7 A2 y# r* U$ H0 A0 }  <div id="App">
    <input v-model="inputValue" />
- Q* |* H' h& e7 {( ^) q    <button @click="submit">Submit</button>
    <ul>
      <todoItem
7 n* E. Z+ Y0 h$ H5 ^* T5 [        v-for="(item,index) in List"
2 O8 O# |  Z& v& E1 l8 b7 E% G$ @        :key="index"
        :content="item"
( q( p. I- H# n: G        :index="index"
6 k, S& c  c( B  y        @delete="handleDelete"
% w; j: W% r, o9 G7 e* \1 U4 r      ></todoItem>
1 I6 q0 J8 D- x, `3 S5 T3 }    </ul>
5 V0 @7 t/ g/ r4 V2 ^5 ]7 S' @3 b1 t" D  </div>
</template>

( [( F: W/ n; _0 {1 @. B  S. H8 b<script>
% J2 F& ?9 Z, o1 o3 w0 h( @import todoItem from "@/components/item.vue";
$ V) q/ e8 B; H7 P
export default {
  data: function() {
$ N! y8 V4 Y  L( n: I  f    return {
: T: x$ P; b7 k) a$ ]      List: [],
      inputValue: ""
; B+ t/ @( m6 D1 }9 [8 g! M7 p' o    };
6 R. I2 E9 `5 ^2 L3 l) M  },
, v8 K  T, y% i& e4 U* R( a  components: {
    todoItem
  },
  methods: {
    submit: function() {
      if (this.inputValue != "") {
. Q# O" S! T+ Y        this.List.push(this.inputValue);
      }
      this.inputValue = "";
) |) p) H  A; a; s/ Q1 Y7 w# Y    },
    handleDelete: function(index) {
3 k5 y4 M- m- z: E      this.List.splice(index, 1);
    }
  }
6 ], Y9 S# B) A8 M( r};
' P  l4 U$ X$ Y, i$ _</script>
" {) J( J6 S% d& H! \2 W
6 U) w7 O  r8 s1 l5 |1 a8 E
) W7 h7 U7 y9 X% x2 p
; l8 y/ J( t/ Q3 p& S* i9 h
6 \; h0 }  b% o/ T! @4 l
( k9 Z' W8 W  i! q

- s2 A& t. ]; T8 R; B6 K% H<template>
  <li @click="deleteItem">{{content}}</li>
</template>

8 E- @' @5 g9 H; p<script>
* {, U5 f9 p3 S2 n  J* H; _) Iexport default {
& q2 ?) _( l6 z8 I4 `: N. _  props: ["content", "index"],
* y7 z; ?/ e$ R& f) Y6 C! U4 c  data: function() {
: @" |# a: N0 H& K$ D6 O    return {};
  },
  methods: {
    deleteItem: function() {
; g- r/ G8 o8 R+ l$ N      this.$emit("delete", this.index);
    }
1 x# p- z* A5 |9 {) q' x% q  }
& J/ R8 K" @4 Y; f9 b};
* n' z) r% ^' Z- n6 W</script>
' ]& c' T9 r; ], Q4 S, P" a; l
! k  Z1 n* C3 a

9 p+ ^: R* V7 L$ d2 T
9 ~+ g" `6 Z! L/ ]