VUE(删除功能)

35 篇文章 0 订阅

点击提交可增加li,点击li可删除当前li

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
            <input v-model="inputValue" />
            <button @click="change">提交</button> 
            <ul>
                <todo-item v-for="(item,index) of list":key="index" :content="item" :index="index" 
                @delete="handleDelete"><!--监听delete,当delete触发之后执行父组件下面的handleDelete事件-->
                </todo-item> <!--将item,index从父组件(id为root的div)传递到子组件(li)用属性绑定-->
                <!--将item传到全局组件里面才能使用-->
            </ul>
            <zujian></zujian>
        </div> 
        <script>
            Vue.component('todo-item',{  //定义名为todo-list的全局组件
                props:['content','index'],
                template:'<li @click="handleClick">{{content}}{{index}}</li>',
                methods:{    //组件也是实例
                    handleClick:function(){
                        this.$emit('delete',this.index)  //点击item之后触发emit事件里面的delete事件值为index,
                    }
                }
            })
            
            var zujian={  //定义名为zujian的局部组件,并且必须在new Vue里面声明(28行)。
                template:'<div>这是局部组件</div>'
            }
            new Vue({
                el:"#root",
                components:{
                    'zujian':zujian
                },
                data:{  
                    inputValue:'',
                    list:[]
                },
            methods:{
                change:function(){
                    this.list.push(this.inputValue);
                    this.inputValue=''               //将"input”放入list里面之后将其初始为空
                },
                handleDelete:function(index){
                    this.list.splice(index,1)
                }
            }
            })
        </script>
    </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue3文件上传删除功能,你可以使用以下步骤: 1. 创建一个文件上传组件,在该组件中添加上传文件的功能。 2. 在文件上传组件中,添加一个删除文件的按钮。 3. 在点击删除按钮时,将该文件的文件名传递给一个删除文件的方法。 4. 在删除文件的方法中,使用axios或者其他的网络请求库,向后端发送一个删除该文件的请求。 5. 当后端成功删除该文件时,将该文件从文件列表中删除。 下面是一个简单的Vue3文件上传删除功能的代码示例: ```vue <template> <div> <input type="file" @change="onFileChange"> <button @click="deleteFile">删除文件</button> <ul> <li v-for="(file, index) in fileList" :key="index">{{file.name}}</li> </ul> </div> </template> <script> import { reactive } from 'vue' import axios from 'axios' export default { setup() { const state = reactive({ fileList: [] }) const onFileChange = (event) => { const files = event.target.files for (let i = 0; i < files.length; i++) { state.fileList.push(files[i]) } } const deleteFile = () => { const fileName = state.fileList[0].name // 假设只有一个文件 axios.delete(`/api/file/${fileName}`).then(() => { state.fileList.splice(0, 1) }) } return { state, onFileChange, deleteFile } } } ``` 在这个示例代码中,我们假设后端提供了一个删除文件的API,该API的URL为`/api/file/${fileName}`,其中`fileName`是要删除的文件的文件名。在点击删除按钮时,我们发送一个DELETE请求到该API,请求成功后,将该文件从文件列表中删除
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值