vue 实现删除对象的元素 delete

目录
  • 删除对象的元素delete
  • vue根据id删除某一行

删除对象的元素 delete

data中定义一个form

  data: {
    seen: true,    
    from:{
        id:'',
        name:'',
        age:'',
    }
  }

现在不需要age元素

删除 delete this.from.age;

场景form表单提交的时候新增的数据和编辑页面公用一个页面 ，在添加的时候不需要id而就可以delete删除id

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,    
      from:{
         id:'',
         name:'',
         age:'',
      }
  },
   mounted() {
    //this.initData();
      this.from.id=1;
      this.from.name='xc';
      this.from.age=18;
      this.from.content='xcvzxcvzxcv'; //直接添加元素
    delete this.from.age;//删除age元素
    console.log(this.from)    
  },  
})
</script>
</body>
</html>

vue根据id删除某一行

methods:{
  del(id){
    //ES6
    //根据id查找元素 findIndex
    //let index = arr.findIndex(function(ele,index,arr){return ele.id==id})
    //函数内如果返回true，就结束遍历并返回当前index;
    //index如果没有找到返回-1
   
    let index = this.tasks.findIndex(funciton(ele){
           return ele.id == id;
    })
    //假设没有找到
    if(index === -1){
         return console.log('删除失败');
    }
    //删除元素
    this.tasks.splice(index,1);
  }  
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue中 axios delete请求参数操作

    vue中axios 的delete和post,put在传值上有点区别 post和put有三个参数,url,data和config,所以在使用这两个时,可以写成axios.post(api,{id:1}),axios.put(api,{id:1}),但是delete只有两个参数:url和config,data在config中,所以需要写成 axios.delete(api,{data:{id:1}}) 如果是服务端将参数当作Java对象来封装接收则 参数格式为: {data: param} var

  • vue 对axios get pust put delete封装的实例代码

    vue 对axios get pust put delete封装的实例代码

    axios.js import axios from 'axios'; import Qs from 'qs'; import {Message} from 'element-ui'; axios.defaults.baseURL = "/api"; // 设置请求超时时间 axios.defaults.timeout = 30000; // 设置post请求头 axios.defaults.headers.post['Content-Type'] = 'application/jso

  • Vue实现动态添加或者删除对象和对象数组的操作方法

    添加核心代码如下: this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', label: 'out' }], value:[{ value: '选项1', label: 'CSV' }, { value: '选项3', label: 'TSV' }], parameter:'', default:'', description:'', isDelete:false, }); 删除核心代码如下: /*遍历数组,然

  • vue 对象添加或删除成员时无法实时更新的解决方法

    vue 对象添加或删除成员时无法实时更新的解决方法

    前阵子将项目搬上Vue的时候偶遇一个突发问题 当对象添加或删除成员时页面无法实时更新渲染,但是数组是正常的 目测是ob没有监听到对象的成员有变化 查看一些大家的求助回答是说ob监听的是数组length的变动 对象默认没有length 新增成员时不会自增length 所以监听不到对象的变化 最近大脑过于疲惫 懒得看文档了... 不多废话 解决方式直接上代码 在实例内部可以用$set和$delete this.$set(this.age,'age',18); this.$delete(this.ag

  • vue 实现删除对象的元素 delete

    目录 删除对象的元素delete vue根据id删除某一行 删除对象的元素 delete data中定义一个form   data: {     seen: true,         from:{         id:'',         name:'',         age:'',     }   } 现在不需要age元素 删除 delete this.from.age; 场景form表单提交的时候新增的数据和编辑页面公用一个页面 ,在添加的时候不需要id而就可以delete删除id

  • Vue.delete()删除对象的属性说明

    Vue.delete()删除对象的属性说明

    目录 Vue.delete()删除对象的属性 delete和Vue.delete的区别 Vue.delete()删除对象的属性 Vue.delete( target, key ) data : { namelist : { id : 1, name : '叶落森' } } // 删除name delete this.namelist.name;//js方法 Vue.delete(this.namelist,'name');//vue方法 delete和Vue.delete的区别 delete:只

  • js删除对象中的某一个字段的方法实现

    本文主要介绍了js删除对象中的某一个字段的方法实现,分享给大家,具体如下: // 以下方法不改变原来对象 let item = { name:'张三', age:'18', gender:'男' }; console.log(item) // {age: "18",gender: "男",name: "张三"} let { age,...params } = item; console.log(item) // {age: "18&qu

  • js delete 用法(删除对象属性及变量)

    1,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete obj.name; console.log(obj.name); //undefined 2,变量删除 var name = 'lily'; delete name; console.log(name); //lily 直接用delelte删除不了变量 3,删除不了原型链中的变量 fun.proto

  • js删除数组中的元素delete和splice的区别详解

    例如有一个数组是 :var textArr = ['a','b','c','d']; 这时我想删除这个数组中的b元素: 方法一:delete 删除数组 delete textArr[1]  结果为: ["a",undefined,"c","d"] 只是被删除的元素变成了 undefined 其他的元素的键值还是不变. 方法二:aplice 删除数组 splice(index,len,[item]) 注释:该方法会改变原始数组. index:数组开

  • vue.js删除动态绑定的radio的指定项

    vue.js删除动态绑定的radio的指定项

    上图效果,动态添加绑定radio选项,然后也可以动态删除,右边编辑器删除,左边的视图也对应的删除. 视图代码 view: "<ul><li v-for='option in options'>" + "<input type='radio' :name='groupName'>{{option.text}}" + "</li></ul>", 数据绑定model.options: opti

  • 解决vue数组中对象属性变化页面不渲染问题

    做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染. 换了关键词搜索找到了相关方法. 其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触. 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 你打开控制台,然后用前面例子的 items 数

  • Vue指令实现大屏元素分辨率适配详解

    目录 前言 1. 常见的适配方案 2. CSS3 缩放方案 3. 封装一个缩放指令 4. 后记 前言 随着前端技术的不断发展.数据中心(中台)之类的概念的不断升级.物联网设备的更新和普及,越来越多的业主(项目)喜欢在系统中添加一个或者多个可视化大屏,用来集中的展现数据变化.位置变化等等,老板们也更喜欢称之为“态势”. 当然,作为程序员一般都不关心“老板们”的想法,只要完成项目即可.但是经常会有这样的问题:我有一个大屏的模板,但是用户的浏览器分辨率不够,或者有的有书签栏有的没有书签栏,更或者是有的

  • vue 数组和对象不能直接赋值情况和解决方法(推荐)

    Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 当第一种情况需求时,可以使用this.$set(this.arr,index,newVal) Vue 不能检测对象属性的添加或删除: 可以使用this.$set(this.person,'age',12) 当需要添加多个对象时,Object.assign({},this.pers

随机推荐