Vue练习题：增删列表

痛定思痛。 2022-04-18 04:09 130阅读 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 条评论，130人围观）

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

相关阅读

相关列表增删写入唯一di

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

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

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

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

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

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

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

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

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

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

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

相关 Vue_列表过渡

如果是列表的话，想要做动画，让列表在包裹在transition-group里面 <transition-group name='listcss'> <div v-fo

刺骨的言语ヽ痛彻心扉/ 2022年05月20日 23:29/ 0 赞/ 245 阅读

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

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

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

相关 Vue练习题：增删列表

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

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

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

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

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

相关练习题（元组、列表、字符串）讲解总结

\1.元组元素求和b=(1,2,3,4,5,6,7,8,9) b = (1, 2, 3, 4, 5, 6, 7, 8, 9) total = 0

Myth丶恋晨/ 2022年03月31日 08:26/ 0 赞/ 330 阅读

相关 Vue列表渲染

列表渲染用\`v-for\`把一个数组对应为一组元素使用v-for遍历对象属性维护状态用`v-for`把一个数组对应为一组元素我们

墨蓝/ 2021年10月20日 00:26/ 0 赞/ 397 阅读