组件方式开发todolist

admin

1 S, N* l) X/ Z


<template>
  <div id="App">
: F. `' P) W# {8 r* ?4 F. ]& N3 a    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
3 e# @7 s, b+ N# D9 p        v-for="(item,index) in List"
        :key="index"
$ [9 Z0 O# S1 e. {) S        :content="item"
        :index="index"
        @delete="handleDelete"
8 F4 v% h; _5 ?2 n: o6 A      ></todoItem>
    </ul>
2 q+ z8 X2 E1 E$ V  f  </div>
</template>
- k' n: Y+ X2 R( J8 q) [
8 l  o3 H( G# }<script>
import todoItem from "@/components/item.vue";
# T; u# l. Q. @5 F
export default {
5 O3 c% ]0 k# u3 X, V  data: function() {
* r" P. t# N$ x6 q: p1 d- r    return {
5 ^) v0 a! @# A% U8 J      List: [],
" ]1 g1 l% ^: R% {9 g6 b6 l      inputValue: ""
5 H; V7 i2 C/ C4 @" {$ @! e, j# j    };
5 |( o& |4 L( V# o' t  },
  components: {
$ C) l( S! T9 D6 E$ W    todoItem
  },
  methods: {
    submit: function() {
& ]) g, c8 h$ f& P  Q      if (this.inputValue != "") {
4 ~2 C  J, Q* v0 M0 r5 u        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
; u4 U, d2 s1 p    handleDelete: function(index) {
1 U( D3 e3 e% y( j% r7 M      this.List.splice(index, 1);
( X- u8 b; B0 F* {    }
1 c; v5 ]4 \- T/ S/ w5 X* u  }
- f# A4 I2 B% X$ w( i7 \+ N4 ]};
1 E5 d( q( P" F# k# K$ e% B</script>

" \2 P- M7 Q( Z* j$ i# m& E  n- W

7 I* o% `3 }3 p# }- E: z
& \- N. n! t1 A/ i# ^% D9 _* W4 `% t
) P* [6 N# k- R5 s/ y
# |% [! ~8 A; w- f
7 O; F% f  S* z* c2 I; \<template>
  <li @click="deleteItem">{{content}}</li>
</template>

* X0 D1 w8 X" p- l$ \; I" S<script>
3 P3 F# J6 X8 J1 V( d; zexport default {
( L! \, n7 |! O" B% H5 u9 e  props: ["content", "index"],
8 v0 O2 N+ H8 j8 b& z0 b  data: function() {
5 a+ Q6 q# D/ P    return {};
0 |9 t* y- J' V+ G  },
7 T5 z( _4 [) X2 ]! e4 L! {  methods: {
$ X( z$ L4 @) B    deleteItem: function() {
      this.$emit("delete", this.index);
! r/ [, P" `+ h  {4 Y    }
! ^0 e* Y: l8 k" c( q  }
; C+ b; y% V7 b/ W/ o2 {};
</script>
. q. X; S+ v1 a$ i



( F2 O  J, K) ^7 ^4 B