组件方式开发todolist

admin

3 `( w0 V, \( N* {8 A) \

4 s& E8 f2 g6 n( M( w" {& f; c6 [<template>
  <div id="App">
0 C, o9 X! V# \  F    <input v-model="inputValue" />
* W+ d) F- z" P    <button @click="submit">Submit</button>
    <ul>
7 r5 g- q" k8 [- |      <todoItem
        v-for="(item,index) in List"
7 {: l- N6 U0 S9 Z, ^6 U        :key="index"
8 j8 t3 n$ z  t7 C. H        :content="item"
: c: x% u2 n& J        :index="index"
$ r- {/ w" w! ]' `2 e        @delete="handleDelete"
$ O* i' f0 |- P6 ?. F5 h      ></todoItem>
    </ul>
' b+ j* W1 ^! ?% ?" \  </div>
6 U  k! V4 x7 ~# v</template>
% T6 m6 ?8 c( B% i3 d
<script>
import todoItem from "@/components/item.vue";
' k0 ~) k) }. b9 x. x6 {
4 q3 G8 O& E  Z  y4 S' ?; ~export default {
0 b/ y% y3 z- u: [( n' e) D) U  data: function() {
    return {
      List: [],
7 y. Z/ |; C/ b" ?# @      inputValue: ""
9 C  N( i7 Z% h0 u4 r7 a! p4 s    };
  },
  components: {
    todoItem
  },
$ T& r$ z# M- a# ~/ V- K  methods: {
. H' |" b$ u0 X/ p/ x% o! s, J) E+ K8 l    submit: function() {
/ x# I8 I& s% K3 G& r' ]2 F      if (this.inputValue != "") {
        this.List.push(this.inputValue);
; a$ P, w. g7 y2 o: j) M. D4 B( X0 F% ]      }
) ~8 b5 K7 @4 ]      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
};
</script>

' S% F/ E; R9 A

$ |$ ]  L8 c- g. H' ^/ L

* x& E! @! s9 H2 F; D3 ?9 Q/ a
2 h  R: F- d/ q4 Z4 ?. b
<template>
  <li @click="deleteItem">{{content}}</li>
2 H3 ]( c- T" x( r2 }</template>
$ p- ?0 T6 Q$ ]
<script>
export default {
' W3 \9 B7 e3 h" M; Q1 _  props: ["content", "index"],
3 X! `2 h0 n' v4 j  data: function() {
' l) e* {9 Y7 ?$ U    return {};
  },
  methods: {
    deleteItem: function() {
2 b; _8 a' y4 z. W3 P' t      this.$emit("delete", this.index);
6 w/ z8 i( _: C' g8 z$ C    }
  }
$ w/ p# R9 J; d" f% d  ?};
</script>


! q- n/ i: T0 ^2 i3 i, l
  {, R7 B5 k( g; l& U