vue 的 todolist


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
  <div id="root">
    <div>
        <input v-model="inputValue" />
        <button @click="handSubmit">提交button>
    div>
   <ul>
     <todo-item 
     v-for="(item,index) of list"
     :key="index" 
     :content="item"
     :index="index"
     @delete ="handDelete"
     >
    todo-item>
   ul>

  div>
  <script>
    Vue.component('todo-item', {
      props: ['content', 'index'],//接收父组件的数据
      template: '
  • {{content}}
  • '
    , methods: { handClick: function() { this.$emit('delete', this.index)//像父组件发送信号 } } }) // var TodoItem = { // template: '
  • item
  • '
    // } new Vue({ el: "#root", // components: { // 'todo-item' :TodoItem // }, data: { inputValue: '', list: [] }, methods: { handSubmit: function(){ this.list.push(this.inputValue) this.inputValue = '' }, handDelete: function(index) { this.list.splice(index, 1) } } })
    script> body> html>

    你可能感兴趣的:(前端)