Vue 中父子组件传值_点提交按钮添加li-CSDN博客

本文链接：https://blog.csdn.net/helpluozhao123/article/details/127861067

一、点击按钮，添加小li

在输入框中输入内内容，点击提交按钮自动添加小li
在这里插入图片描述

二、点击小li 对ul 中li 进行删除

在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./vue.js"></script>
</head>
<body>
    
          <div id="app">
            <input type="text" name="" id="" v-model="inputValue">
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <!-- <li v-for="itme in list">{{itme}}</li> -->

                <todo-item v-bind:content="item" 
                           v-bind:index="index"
                           v-for="(item,index) in list"
                           @delete="handleItemDelete">

                </todo-item>
            </ul>  
          </div>
          <script>

            Vue.component("TodoItem",{
              props:['content','index'],
              template: "<li @click='handleItemClick'>{{content}}</li>",
              methods:{
                handleItemClick: function(){
                  this.$emit("delete",this.index)
                }
              }
            })

                let app =new Vue({
                  el:'#app',
                  data: {
                      list:[],
                      inputValue:''
                  },
                  methods:{
                    handleBtnClick:function(){
                        this.list.push(this.inputValue)
                        this.inputValue =''  
                    },
                    handleItemDelete:function(index){
                    this.list.splice(index,1)
                    }
                  }

                } )

          </script>


</body>
</html>