组件方式开发todolist

admin

<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
; \1 e0 ?6 H8 g3 K        :index="index"
        @delete="handleDelete"
      ></todoItem>
' t, V% m8 ~. L: C( M# b    </ul>
  </div>
</template>

<script>
import todoItem from "@/components/item.vue";
; @+ k+ G0 v# v6 r4 I
export default {
  data: function() {
    return {
      List: [],
& U0 Y# Y, J/ S% o! ]1 p/ j      inputValue: ""
' S9 \! D1 M) H6 R- |6 ]    };
) G/ l' `/ g0 a; Q! C* s  },
  components: {
    todoItem
  },
  methods: {
% p0 X8 |8 {$ _. ^- R# i    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
2 k- F2 Z8 o8 ^5 |      this.inputValue = "";
    },
    handleDelete: function(index) {
6 w4 A8 Y- u, }, j. l8 p6 c& `      this.List.splice(index, 1);
8 g0 F' K: L! p7 F    }
  }
};
</script>

5 L0 a$ `6 j1 v% }8 n; I0 y* T5 a' {7 @

& i* ~% R3 I) e/ j' C
( o; b- g3 \9 t4 u& }" k9 P8 X; |
+ O6 J, W: W7 Y2 e/ A; G

<template>
2 T8 R# T4 ~! \; ?/ M! G/ Z. a  <li @click="deleteItem">{{content}}</li>
</template>

, `% N" ^2 f* T<script>
9 c) u: Y/ l3 ]( R( cexport default {
. O- T. B2 x* a6 i  props: ["content", "index"],
  data: function() {
1 X; g/ v. n1 s! X% m    return {};
$ N% u) c) ]& Q1 I8 S  },
( ]. {, z6 V) V  methods: {
" N% c8 R& L/ t1 S0 P1 x* D    deleteItem: function() {
" O! @6 z* u* E/ x- H      this.$emit("delete", this.index);
    }
  }
/ B9 e$ X- p/ B};
/ G4 \( z: S% @! v! k( d</script>
4 o* i# x+ [/ e- ~$ U9 x" k
+ E+ A, W4 }# G1 x! ?0 e
- |; u- r5 L2 W
$ h  ?& |2 Q- K7 W. [/ R9 e