vue添加,删除内容

vue 提交添加内容,点击删除内容

1 html

<input v-model="inputValue" />
    <button @click="handClick">提交</button>
    <ul>
        <todo-item
        v-for="(item,index) in list" :key="index"
        :content="item"
        :index=‘index‘
        @delete="handdelete"
        ></todo-item>
    </ul>

2 js

export default {
        data(){
            return{
                inputValue:‘‘,
                list:[]
            }
        },
        methods:{        //点击提交添加内容
            handClick(){
                this.list.push(this.inputValue)
                this.inputValue=‘‘
            },
            // @delete="handdelete"   监听子组件的方法 delete
           handdelete(index){  //接收子组件传过来的index 进行删除
               this.list.splice(index,1)
           }
        }
    }

原文地址:https://www.cnblogs.com/lidonglin/p/9836812.html

时间: 2024-10-12 15:06:00

vue添加,删除内容的相关文章

Vue,品牌列表案例(仅添加,删除,搜索,全局过滤器,私有过滤器)

Vue,品牌列表案例(仅添加,删除,搜索,全局过滤器,私有过滤器) 添加了时间过滤器(私有的) 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="../../js/vue.js"></script> 7 <link rel=&qu

pdf如何添加或删除内容

如何去编辑PDF文档,对于很多人来说都是一件非常苦恼的事情.之所以会苦恼,是因为没有找对方法.使用捷速pdf修改器,我们就可以快速对PDF进行编辑了,而且操作还是十分的简单.下面我们一起来看如何具体操作吧,相信大家一定能学会的. 一.修改文字 1.移动文字: 直接选中需要移动的文字,选中后会有编辑框包围所选中的内容,在选中的文字范围内按住鼠标左键直接进拖动,就可以实现文字的移动了.需要的话,还可以直接使用鼠标调节编辑框的大小. 2.删除和添加文字 删除文字:选中要删除的文字,键盘按delete.

【收藏】Linux添加/删除用户和用户组

1.建用户:adduser phpq                             //新建phpq用户passwd phpq                               //给phpq用户设置密码 2.建工作组groupadd test                          //新建test工作组 3.新建用户同时增加工作组useradd -g test phpq                      //新建phpq用户并增加到test工作组 注::

添加删除功能的EditText

EditTextWithDel组件的功能如下:        1.在没用内容的时候显示不可用的图片状态,在有内容的时候显示可用的图片状态:        2.在有内容的时候点击删除按钮可以删除EditText中的内容: 组件的代码如下: [java]view plaincopyprint? package com.sunday.customs; import com.example.customs.R; import android.content.Context; import android

js实现网页收藏功能,动态添加删除网址

<html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"> <script> function add(){ var name = document.getElementById("name").value; var url = document.getElementById("url").value; var

WebService的简单运用添加删除

WebService是一种跨编程语言和跨操作系统平台的远程调用技术,简单来说就是将数据存储到项目的文件夹下 .NET中基于DOM核心类 XmlDocument 表示一个XML文档 XmlNode表示XML文档中的单个节点 XmlNodeList表示排序节点集合 XmlElement表示一个元素 XmlAttribyte 表示一个属性 XmlAttribyteCollection表示元素节点的属性集合 XmlText表示元素或属性的文本类容 ----------------------------

Js实现动态添加删除Table行示例

<table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor="#96E0E2" style="height:30px;&quo

javascript动态添加删除表格

一.DOM= Document Object Model,文档对象模型.DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个HTML或XML文档的常用方法. 通过 JavaScript,您可以重构整个 HTML 文档.您可以添加.移除.改变或重排页面上的项目. 要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口.这个入口,连同对 HTML 元素进行添加.移动.改变或移除的方法和属性,都是通过文档对象模型来

Linux iptables防火墙添加删除端口

一.  Linux 防火墙的启动和关闭1.1 启动命令[[email protected] ~]# service iptables stopFlushing firewall rules:                                   [  OK  ]Setting chains to policy ACCEPT: filter nat                [  OK  ]Unloading iptables modules: