组件方式开发todolist

admin

# f* c( v% u1 O2 s7 p) k& P/ r

" J, K3 `# X7 l" A& W0 l
<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
; A9 X; p* o9 s& @, n7 T    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
- X9 v; o9 ?) n- I7 c      ></todoItem>
1 ^4 L6 |+ [4 ]! d2 P8 z    </ul>
  </div>
+ e; _2 o! D! W: y+ m. v9 L</template>

; _  Y4 v0 y  P<script>
import todoItem from "@/components/item.vue";

export default {
5 B* W  m& l  F( E; v- T5 G  data: function() {
$ R4 R" E. y  x" {    return {
      List: [],
4 c/ h/ T9 s7 z$ ]$ a( q- I      inputValue: ""
    };
  },
, e. D8 t: p/ K2 v+ u$ v  components: {
    todoItem
  },
  methods: {
    submit: function() {
6 p2 W6 `: V  j6 Y% f2 Q      if (this.inputValue != "") {
        this.List.push(this.inputValue);
6 P5 u) A6 }/ i3 b7 S) f      }
8 t- J* h' M) i+ \/ J7 k3 J$ W      this.inputValue = "";
5 H8 ]& E# C! w- n    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
$ ]% B3 k0 I4 j0 X};
5 ^! E8 J- j+ h: f% A$ p</script>
# D/ u' P- {' z" Y6 j2 O* \
9 l7 e: c' {$ c9 o0 }

" g8 I/ {/ O" F4 H0 I9 E


9 K, S! D( k! Y  f$ e0 ^
, `2 ~4 q& `6 m+ V' a  b) m<template>
  <li @click="deleteItem">{{content}}</li>
</template>
) g1 K" b5 f8 u
/ B! E5 b7 F  O, r3 x<script>
export default {
4 T  z/ S) X- P5 l  props: ["content", "index"],
, i: s3 H8 J  ?! y9 G1 R0 u" X  data: function() {
    return {};
  },
% s! `( s  W- b) }6 d0 i  methods: {
$ D# V* D2 E8 Z! E: g( o6 @    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
+ |1 o& Y/ V$ O  J. S5 K7 f};
</script>


& t+ ]6 w: V* Y! ~# m; i: Z" e. u0 n

% S0 j+ g$ Q6 x