vue在组件中删除实例中数据splice

港控/mmm° 2023-10-04 13:54 19阅读 0赞

<!DOCTYPE html>
    <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" v-bind:divmessage="message"></todo-title>
            <todo-items slot="todo-items" v-for="(list,index) in lists"  v-bind:str="list" v-bind:index="index" ></todo-items>
        </todo>
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        Vue.component("todo",{
         
            template: "<div>\
                    <slot name='todo-title'></slot>\
                    <ul>\
                        <slot name='todo-items'></slot>\
                    </ul>\
                </div>"
        })
        Vue.component("todo-title",{
         
            props: ["divmessage"],
            template: "<div>{
         {divmessage}}</div>"
        })
        Vue.component("todo-items",{
         
            props: ["str","index"],
            template: "<li>{
         {str}}--{
         {index}}<button  v-on:click='remove1(index)'>删除</button></li>",
            methods: {
         
                remove1: function (index) {
         
                    vm.lists.splice(index,1)
                }
            }
        })
        var vm=new Vue({
         
            el: "#app",
            data: {
         
                message: "课程",
                lists: ["java","web","net"]
            },
            /*methods: {
                removeItems: function (canshu) {
                    this.lists.splice(canshu,1)
                    alert(this.lists)
                }
            }*/
        });
    </script>
    
    </body>
    </html>