组件方式开发todolist

admin

/ C7 o  z3 x: Q0 t( D$ b: X6 F


. m; @( T( }( Q) G. l5 I2 o<template>
  <div id="App">
! c6 b3 U1 i/ r- C  ]; [, |    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
2 K6 @* V4 o/ J: d6 @6 W, u  j# o4 y    <ul>
# X# Z- l6 r( z; X# h$ I) E& Y      <todoItem
        v-for="(item,index) in List"
& {1 [# N+ e% z- I; y        :key="index"
! v" }" h8 I4 F, l, ?        :content="item"
) }+ E6 i7 I" J4 q5 ^, L2 a        :index="index"
- v" W2 N5 T* q) X+ b3 M( I        @delete="handleDelete"
% c; d: q; r& J' a8 m      ></todoItem>
    </ul>
! ]! u0 u5 A1 w% s& y6 w  </div>
$ F# G; i" r& v" V; B</template>
0 ?0 Q7 `9 ]3 F5 g) E/ x
<script>
import todoItem from "@/components/item.vue";
5 R  d2 X; ?0 {$ u! q. ~
export default {
4 c( O. _/ o: W* `+ [  data: function() {
    return {
      List: [],
( n, ~& m0 d9 Y& n      inputValue: ""
    };
  },
  components: {
    todoItem
  },
  methods: {
: }/ O9 h3 x0 G- s( b& r    submit: function() {
5 `' N( h& `: R; m/ f      if (this.inputValue != "") {
0 A7 g6 Z" X6 x% l        this.List.push(this.inputValue);
      }
, S9 w: I+ p0 V* H8 z, J  m, s4 O      this.inputValue = "";
2 o5 K, T$ E0 [+ n- O. E    },
/ ?/ Z- w+ J- T& p/ w    handleDelete: function(index) {
      this.List.splice(index, 1);
. P  k: K" r3 E. o    }
  }
};
3 V! P+ X( T9 s7 o- U  d7 [</script>
: S) y. f6 n. Y6 W& c5 l' G5 B
1 Q* ?/ ^! b' @' B" B& @; C$ \" D
" i0 ^+ a/ |, x* \: ~8 }+ r8 ?


* w; o% m% p' j7 e

<template>
  <li @click="deleteItem">{{content}}</li>
1 Y2 G7 V9 @8 S" w* R7 f</template>
0 e/ A  N) o8 \$ k
7 z; [, P7 I+ o<script>
7 [! R6 g7 T5 O: lexport default {
0 f3 J: k1 B7 P7 V2 ~  props: ["content", "index"],
& Y8 j' i# Z! L) W: ?* f5 P  data: function() {
    return {};
& K% A& Q6 T5 H3 C0 S$ P  },
  methods: {
    deleteItem: function() {
* |3 W: y$ [$ `' z! L  e      this.$emit("delete", this.index);
    }
  }
9 q1 z- C9 x1 [- e7 e1 o};
</script>
9 H+ h( z3 d' m. }! ]- x

4 K3 p  ]& [: j$ f* f# G