组件方式开发todolist

admin

9 Q# Y% I( y; l- {- m
5 A6 E3 u- d/ f

<template>
& p, Q) q1 q. @' s+ v5 L  <div id="App">
! e; `" z( R* T    <input v-model="inputValue" />
- }4 T* A/ i% e) ~, E  _    <button @click="submit">Submit</button>
# i8 f1 ^0 `$ }8 b( c4 V4 R    <ul>
1 }, f, t2 p- N; i0 }      <todoItem
        v-for="(item,index) in List"
3 S: i9 W9 |; c  B6 i        :key="index"
0 }, p& o5 g' N6 v. l        :content="item"
3 V; R, |% X5 L        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
; g9 j1 g/ M! F( x, W1 |  </div>
. l/ v2 d9 V. F* V6 I* @5 r; x</template>

; I/ B, E- _9 ]* L, _, D" y4 r<script>
! q$ A/ _4 m- D' d+ l; |, ]5 cimport todoItem from "@/components/item.vue";

export default {
  data: function() {
    return {
      List: [],
      inputValue: ""
3 \3 c* k* p# h% }, G" w) F    };
1 m2 w3 p- ~9 J( L. u/ U5 S% c  },
% p' ~6 i' l+ M; ~; ^5 B  components: {
" b. M1 x- }3 i- [  ^/ X" t* R    todoItem
  },
0 p0 f3 o, q. J" y* H1 i. V  methods: {
1 d7 J0 U8 |6 I! p" N7 l    submit: function() {
      if (this.inputValue != "") {
2 p2 I2 |7 A2 _5 @        this.List.push(this.inputValue);
; m" M" j' z4 w" _      }
5 n6 M, M! @4 U      this.inputValue = "";
2 b' {  z( B) ?. a; m( Y  X    },
8 u( g5 H& [* [5 X' J, ?    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
! \% i0 Q+ t! `0 c7 ]  }
};
" O" _# D7 c! r, F5 h3 U' \4 G6 N1 a</script>
5 I# A) @' z2 Z: g% {! N
" A8 Z& z( s. O' c3 I


9 d7 E# [9 g& c% c8 h# z5 v# w( [
2 Y2 m% U# N9 U6 S( m# q
- z" j  x7 G4 v8 O/ Z2 {
* n2 j3 X* m- d9 n1 N* b/ Z1 K<template>
  <li @click="deleteItem">{{content}}</li>
</template>

<script>
export default {
  props: ["content", "index"],
  data: function() {
    return {};
+ @$ \* g. w5 u7 e3 w  },
  methods: {
1 k: m, o% @+ h- s    deleteItem: function() {
5 c" e; W8 [/ x! s5 @+ q/ ]      this.$emit("delete", this.index);
! u" X( X6 t( v  z5 _- j# f2 n8 j. j    }
; t7 c/ u. t: s' y" h  }
};
' J- e8 W. g' D  ^6 T8 [</script>
, K! o6 `1 p" R2 ~



6 `! J5 J) {3 y5 b/ e