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

最新推荐文章于 2024-07-09 15:23:35 发布

Archie_java

最新推荐文章于 2024-07-09 15:23:35 发布

阅读量412

点赞数

文章标签： vue splice

本文链接：https://blog.csdn.net/qq_43842093/article/details/117030135

版权


<!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>

<!--1.导入Vue.js-->
<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>