webs
/
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>testzishan</title>
    <style type="text/css"></style>
    <meta charset="UTF-8">
    <script src="./vue.js"></script>
    <body>

      <div id="app">
        <input type="text" v-model="inputValue">
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
          <!-- <li v-for="item in list">{{item}}</li> -->
          <todo-item
            :content="item"
            :index="index"
            v-for="(item,index) in list"
            @delete="handelItemDelete"
          ></todo-item>
        </ul>
      </div>
      <script>
        // Vue.component("TodoItem",{
        //   template:"<li>{{content}}</li>",
        //   props:['content']
        // });
        var TodoItem = {
          template:"<li @click='handleClick'>{{content}}</li>",
          methods:{
            handleClick: function(){
              this.$emit("delete",this.index)
            }
          },
          props:['content','index']
        }
        let app = new Vue({
          el:'#app',
          components:{
            TodoItem,
          },
          data:{
            list:[],
            inputValue:''
          },
          methods:{
            handleBtnClick: function(){
              this.list.push(this.inputValue);
              this.inputValue = ''
            },
            handelItemDelete:function(index){
              this.list.splice(index,1)
            }
          }
        });

      </script>
    </body>
  </head>
</html>