Vue练习题：增删列表

痛定思痛。 2022-04-18 04:09 152阅读 0赞

实现功能：在输入框中输入内容，点击提交后，内容在列表中出现，然后点击列表中的内容，对应列表会删除

![20181108115743586.png][]

<div id="demo" class="demo">
            <input type="text" v-model="content">
            <button v-on:click="submit">提交</button>
            <ul>
                <todo-list v-for="(item,index) in items" :item="item" :index="index" @delete="deleteThing"></todo-list>
            </ul>
        </div>
        <script>
            var TodoList = {
                props: ['item', 'index'],
                template: `<li @click='$emit("delete",index)'>{
       {item}}</li>`
            }
            var vm = new Vue({
                el: '#demo',
                components: {
                    TodoList: TodoList
                },
                data: {
                    items: ['1', '2'],
                    content: '',
                },
                methods: {
                    submit: function () {
                        this.items.push(this.content);
                        this.content = ''
                    },
                    deleteThing: function (index) {
                        this.items.splice(index, 1);
                    }
                }
            })
        </script>

此处用到了：

局部组件：局部组件在Vue的components中申明才能使用

组件的传值（索引值的传递）

数组方法：splice的用法（index, 1），从索引值是几的位置裁剪1个

[20181108115743586.png]: /images/20220418/5106b9a402d949e08a5588ea9e4ecff9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

相关基于Vue+SSM+SpringCloudAlibaba员工列表增删改查

表说明： Departemp：![f71eb28751a44595b70567500d299023.png][] depart\_userID：员工编号 depart

淡淡的烟草味﹌/ 2024年04月03日 08:27/ 0 赞/ 96 阅读

相关 python练习题__列表

python练习题\_\_列表 -------------------- （1）、访问列表中第一个元素的值 <table> <tbody> <tr>

阳光穿透心脏的1/2处/ 2024年03月26日 18:16/ 0 赞/ 92 阅读

相关 python练习题（列表）

有多个学生的成绩72,89,65,58,87,91,53,82,71,93,76,68 a.计算并输出学生的平均成绩。 b.统计各成绩等级（90分

港控/mmm°/ 2023年07月24日 02:01/ 0 赞/ 27 阅读

相关列表增删写入唯一di

let arr = [ { name:"张三", key:1 }, { name:"

你的名字/ 2022年12月28日 08:11/ 0 赞/ 106 阅读

相关 Python列表、字典、元组练习题

一、将下列姓名长度小于2字符的删除，将写法不同但名字一样的名字合并，并按首字母大写形式输出。 > names=\[‘Bob’,‘JOHN’,‘alice’,‘bob’,‘AL

小灰灰/ 2022年11月07日 05:47/ 0 赞/ 498 阅读

相关 Vue入门实战-列表的增删改查（Axios调用API）

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

左手的ㄟ右手/ 2022年11月01日 04:25/ 0 赞/ 188 阅读

相关 Vue实现简单的列表增删改查

首先引入样式文件bootstrap.min.css和vue.js <link href="~/Content/css/bootstrap.min.css" rel

淩亂°似流年/ 2022年09月14日 15:23/ 0 赞/ 293 阅读

相关列表增删改案例：附图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

你的名字/ 2022年04月23日 15:24/ 0 赞/ 209 阅读

相关 Vue练习题：增删列表

实现功能：在输入框中输入内容，点击提交后，内容在列表中出现，然后点击列表中的内容，对应列表会删除 ![20181108115743586.png][] <div

痛定思痛。/ 2022年04月18日 04:09/ 0 赞/ 153 阅读

相关 vue中列表增删时的动画过渡效果

用transition-group 包裹标签，注意没有name属性，要使用v-enter等类 <style> .v-enter, .v

痛定思痛。/ 2022年04月15日 04:06/ 0 赞/ 431 阅读