精华内容
下载资源
问答
  • vue删除数组对象中的所有空数据

    千次阅读 2020-05-18 09:41:25
    场景 动态表头,动态表身体。但是表头肯定是有数据才展示,但是后端返回的数据,有的是null,这就有一个问题,看图你就明白了 三个 表头,五个...利用key in value的方法,找出当前项为空的数据,delete 当前为空的数据

    场景

    动态表头,动态表身体。但是表头肯定是有数据才展示,但是后端返回的数据,有的是null,这就有一个问题,看图你就明白了
    

    在这里插入图片描述
    三个 表头,五个数据,这怎么对应?
    所以我就想 把为null 的数据全部删掉,只展示有数据的

    代码

    if (this.recommended) {
            this.recommended.forEach(element => {
              for (var key in element) {
                if (element[key] == null) {
                  delete element[key];
                }
              }
            });
          }
    

    注意观察接口返回的数据

    第一层是数组,第二层是对象,所以第一层用数组的forEach遍历,找出数组的每一项。数组的每一项是一个大的对象集合。利用key in value的方法,找出当前项为空的数据,delete 当前为空的数据

    展开全文
  • vue 如何删除对象的某一条数据

    万次阅读 2019-03-21 10:58:32
    使用vue框架,采用element-ui,在做表格在线编辑的效果时需要删除某一行,这就需要从原来tableData数组对象中产出当前需要删除的条目。 方法: handleDelete(index,row){ this.tableData.splice(index,1); }...

    使用vue框架,采用element-ui,在做表格在线编辑的效果时需要删除某一行,这就需要从原来tableData数组对象中产出当前需要删除的条目。

    方法:

     

    handleDelete(index,row){

    this.tableData.splice(index,1);

    }

     

    参考原文链接:https://blog.csdn.net/qq_35366269/article/details/84873545

    展开全文
  • Vue之数据对象

    千次阅读 2019-07-20 13:05:24
    Vue的数据对象中涉及的HTML特性、DOM属性、组件prop、特殊特性 Vue中对于4种属性或特性处理所涉及的相关逻辑 HTML特性和DOM属性 实际上对于HTML特性和DOM属性,之前对于其的理解是相同的东西,实际上它们是不同...

    前言

    本篇文章旨在学习Vue对于相关属性或特性的处理,同时学习HTML特性和DOM属性的区别和联系,实际上涉及到以下内容:

    • HTML特性和DOM属性之间的联系与区别
    • Vue的数据对象中涉及的HTML特性、DOM属性、组件prop、特殊特性
    • Vue中对于4种属性或特性处理所涉及的相关逻辑

    HTML特性和DOM属性

    实际上对于HTML特性和DOM属性,之前对于其的理解是相同的东西,实际上它们是不同的概念。

    Attribute表示特性,Property表示属性(实际上这两个单词都可以翻译成属性)。在《JavaScript高级程序设计》一书中,就存在特性和属性的不同表述。在该书中存在涉及到特性和属性区别有一些描述:

    • 所有HTML元素都由HTMLElement或者更具体的子类型表示的,每个元素都有一个或多个特性

    • 操作特性的DOM方法主要有三个:getAttribute()、setAttribute()和removeAttribute()。这三个方法可以针对任何特性使用,包括哪些以HTMLElement类型属性定义的特性

    • HTMLElement类型直接继承自Element并添加了一些属性。添加的这些属性分别对应着每个HTML元素中都存在的标准特性。

    从上面几个的描述中,目前可以得到关于特性和属性的概念:

    • 特性是指在HTML标签上定义的
    • 属性是指DOM对象的,可以通过这些属性来修改对应HTML上的特性值
    • 一个HTML元素的特性和DOM属性是存在交集的,交集的这部分可能名称相同也可能不同,正是这种机制才有了所谓的DOM修改,因为DOM通过操作对应的属性来修改指定的特性值,而修改后的特性值会立即反映在页面上

    简单的来说,特性是HTML区别于与之对应DOM对象的属性的表述,不是每一个特性都有与之对应的属性,反之亦然。

    实例:class特性、style特性、自定义data-key特性

    看看上面几个特性在DOM对象中与之对应的属性,应该相关的DOM操作。

    <div
      class="attr"
      style="text-align: center"
      data-key="key"
    >
    </div>
    
    var app = document.getElementById('app');
    var dataKey = app.getAttribute('data-key');
    console.log(dataKey); // "key"
    // 但是自定义特性没有与之对应的属性,即app.dataKey是不存在的
    console.log(app.dataKey);
    
    // 获取class特性
    var class = app.getAttribute('class');
    // 与之对应的DOM属性
    var classOfAttr = app.className;
    
    // 获取style特性,获取到的值是字符串
    var style = app.getAttribute('style');
    // 与之对应DOM属性,获取到的结果是对象
    var styleOfAttr = app.style;
    

    Vue中涉及的属性和特性

    实际上主要是渲染函数&JSX提及到的数据对象,其中涉及到的特性和属性有:

    {
      // 普通的HTML特性
      attrs: {},
      // DOM属性
      domProps: {},
      // 组件prop
      props: {}
      // 特殊特性
      key: "",
      ref: "",
      slot: "",
      scopedSlots: {
        default: () => {}
      }
      ...
    }
    

    由此提出以下系列问题:

    • domProps中属性放在attrs对象中
    • attrs中属性放在domProps中
    • 组件props属性放在attrs或domProps中
    • attr或domProps放在组件Prop中
    • 组件Prop放在最外层
    • 特殊特性放在attrs、domProps或组件props

    实际上上面的问题都是Vue对于这种判别逻辑的处理,由于HTML特性和DOM属性会存在相对应的,所以这里就分为两类情况:

    • DOM属性和HTML特性相对应的特性,例如:title
    • 私有的,DOM属性例如innerText,HTML特性例如自定义属性

    存在编译步骤

    存在template模板内容会调用编译过程的,通过这个过程可以清楚看到Vue对所有属性和特性的分配处理,借此来对比使用JSX的数据对象应该的书写方式。

    实例:

    <el-button
    	class="attr"
      key="app"
      ref="appRef"
      :data="value"
      :text-content.prop="value"
      id="btn"
      type="primary"
     >
     </el-button>
    

    实际上要看还是Vue的编译器部分,不过这里主要注重标签的特性解析,实际上就是主要是parseHTML的start部分,主要如下:

    // template就是要解析的文本,实际上就是template中的内容
    parseHTML(template, {
      start: function start(tag, attrs,unary) {
        // 主要关注这个函数中解析逻辑
       	processElement(element, options);
      }
    });
    

    processElement的内容如下:

    function processElement (element, options) {
      // 解析key
      processKey(element);
      // 当前标签是文本
      element.plain = !element.key && !element.attrsList.length;
      // 解析ref
      processRef(element);
      // 解析slot
      processSlot(element);
      // 解析is属性和inline-template
      processComponent(element);
      // 解析attrs
      processAttrs(element);
    }
    

    首先看看key的获取,即processKey函数主要逻辑:

    function processKey(el) {
      /**
      	getBindingAttr就是查找当前标签解析出来的所有特性(过程变量,会存在attrMap和attrList)是否包含
      	:key、v-bind:key、key这三种特性,实际上就是判断是否是动态prop,不是就判断是否是静态prop,然后获取对应值并删除attrList中对应的属性
      */
      var exp = getBindingAttr(el, 'key');
      el.key = exp;
    }
    

    ref的处理也是如此,slot的处理就稍微复杂些,需要判断slot还是slot-scope然后获取相关name属性或设置作用域(这边不是主要专注点本期就不展开)。

    最主要就是processAttrs函数的处理逻辑了,HTML属性、domProps和自定义组件prop都是在这里处理(前提是存在解析器步骤)。
    在这里插入图片描述

    上图是processAttrs的主要的解析步骤,本次需要关注的是v-bind或:的解析逻辑和普通属性的解析逻辑。

    普通属性的都是存放在attrs对象内,即调用addAttr函数。

    v-bind或:开头的prop的处理相对想说就比较复杂,首先通过Vue.js的官方文档,可知v-bind支持3种修饰符:

    • .prop:被用于绑定DOM属性
    • .camel:将kebaba-case特性名转换成camelCase
    • .sync:语法糖,会绑定事件处理v-on:update的处理

    这里需要注意的是.prop修饰符,在实际生产中不常用,该属性支持将DOM属性通过特性方式来修改。实际官方文档就给出了一个例子:

    <template>
    	<div :text-content.prop="text"></div>
    	<div :inner-html.prop="text"></div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            text: '测试'
          };
        }
      }
    </script>
    

    上面的例子HTML特性 text-content和inner-html不能看成自定义特性,可以看成DOM属性textContent 和 innerHTML,而实际效果跟DOM插入是相同:

    两个div都存在内容,内容文本是text的值,即测试

    而对于这种Vue的处理是将其看成prop,言外之意就是普通的prop实际上Vue会将其存储到attrs对象中

    从之前上图的逻辑中也可以看出,只有满足:isProp || 特殊属性,才会调用addProp将属性保存到props对象。

    isProp就是标识存在.prop修饰符的情况,而特殊属性这里简单提及下,下一篇的文章会具体该部分的梳理

    实际上特殊属性的校验是调用下面函数:

    var acceptValue = makeMap('input,textarea,option,select,progress');
    var mustUseProp = function (tag, type, attr) {
      return (
        (attr === 'value' && acceptValue(tag)) && type !== 'button' ||
        (attr === 'selected' && tag === 'option') ||
        (attr === 'checked' && tag === 'input') ||
        (attr === 'muted' && tag === 'video')
      )
    };
    

    从上面可以看出特殊属性具体是:

    存在value属性的元素、radio、checkbox、select、option、video

    基本上都是存在复杂处理的表单元素,之所以这些需要当成动态prop来处理,是因为Vue对这些元素存在着特殊处理,实际上主要是v-model语法糖的实现(video排除在外,video muted这个是另外的问题,代码中有特殊注释),下一篇文章会具体看看v-model语法糖的实现(包含了这些特殊的表单元素)。

    至此可以得到结论:

    存在.prop修饰和指定标签的特殊属性,会被保存到Vue的props对象中。处了前面情况,其他属性都在Vue的attrs对象中,包含不存在.prop修饰符的动态prop

    上面是解析AST过程中涉及到属性的处理逻辑,实际上在构建render还有生成code的处理逻辑,数据对象的生成在这里会有具体的逻辑,主要是:

    generate -> genElement -> genData$2

    genData$2就是构建大部分数据对象的处理函数,具体代码如下:

    function genData$2 (el, state) {
      var data = '{';
      // 指令
      var dirs = genDirectives(el, state);
      if (dirs) { data += dirs + ','; }
    
      // key
      if (el.key) {
        data += "key:" + (el.key) + ",";
      }
      // ref
      if (el.ref) {
        data += "ref:" + (el.ref) + ",";
      }
      // refInFor
      if (el.refInFor) {
        data += "refInFor:true,";
      }
      // pre
      if (el.pre) {
        data += "pre:true,";
      }
      // component动态组件
      if (el.component) {
        data += "tag:\"" + (el.tag) + "\",";
      }
      // module data generation functions
      for (var i = 0; i < state.dataGenFns.length; i++) {
        data += state.dataGenFns[i](el);
      }
      // attributes
      if (el.attrs) {
        data += "attrs:{" + (genProps(el.attrs)) + "},";
      }
      // DOM props,注意这里,所有props都是domProps
      if (el.props) {
        data += "domProps:{" + (genProps(el.props)) + "},";
      }
      // event handlers
      if (el.events) {
        data += (genHandlers(el.events, false, state.warn)) + ",";
      }
      if (el.nativeEvents) {
        data += (genHandlers(el.nativeEvents, true, state.warn)) + ",";
      }
      // slot target
      // only for non-scoped slots
      if (el.slotTarget && !el.slotScope) {
        data += "slot:" + (el.slotTarget) + ",";
      }
      // scoped slots
      if (el.scopedSlots) {
        data += (genScopedSlots(el.scopedSlots, state)) + ",";
      }
      return data
    }
    

    通过这边的处理,再对比通过JSX书写的数据对象:

    {
      // 普通的HTML特性
      attrs: {},
      // DOM属性
      domProps: {},
      // 组件prop
      props: {}
      // 特殊特性
      key: "",
      ref: "",
      slot: "",
      scopedSlots: {
        default: () => {}
      }
    	...
    }
    

    二者方式最主要的区别是JSX少了解析template阶段,手动调用$createElement来实现组件相关逻辑。

    而在上面的解析阶段,提到了attrs和props对象,需要注意的是这两个对象的生命周期结束于render函数构建出来之后,即render函数构建完成后这两个对象就被丢弃了。

    <!-- template形式 -->
    <el-button
    	class="attr"
      key="app"
      ref="appRef"
      :text-content.prop="value"
      id="btn"
      type="primary"
    >
    </el-button>
    
    <!-- jsx -->
    <script>
      export default {
        data() {
          return {
            value: [1, 2]
          };
        },
        render() {
        	const h = this.$createElement;
          return h('el-button',{
          	key: 'app',
            ref: 'appRef',
            'class': {
               attr: true
             },
             attrs: {
               id: 'btn'
             },
              domProps: {
                textContent: this.value
              },
              props: {
                type: 'primary'
              }
            });
          }
      }
    </script>
    

    效果:
    在这里插入图片描述
    实际上面两种形式在生成VNode时是存在不同的,实际上是data属性值不同。具体如下:

    在这里插入图片描述
    左图是template形式构建的VNode的data属性,有图是render形式构建的VNode的data属性。实际上还是存在差别的:

    • 综合上面的种种,template形式下编译器存在特殊处理:

      1、class内部是staticClass,即静态class,反而言之,也存在动态class,即Vue支持写法

      <div class="attr" :class="value"></div>
      

      2、props如果子组件存在对应的prop,就不会被解析到attrs对象中,会在initState函数中对props有相关处理

    • JSX形式的,VNode的data属性传递的数据对象不会变动,会在此基础上添加相关属性

    到此,可以来看看下面几个问题:

    domProps与attrs

    由于DOM属性存在dom特有的,也存在与HTML特性相对应的,实际上:

    • 如果将HTML特性放在domProps中也会生效
    • dom属性只能放在domProps才能生效
    组件props属性与attrs或domProps

    render函数构建之后,就会执行render函数生成VNode,无论是template形式还是手动构建render函数,都会在背后调用$createElement来创建节点,而这个过程会涉及到一个非常重要的函数:extractPropsFromVNodeData。

    function extractPropsFromVNodeData (
      data,
      Ctor,
      tag
    ) {
      // 组件的props选项
      var propOptions = Ctor.options.props;
      if (isUndef(propOptions)) {
        return
      }
      var res = {};
      // attrs、props
      var attrs = data.attrs;
      var props = data.props;
      if (isDef(attrs) || isDef(props)) {
        // 遍历props中属性
        for (var key in propOptions) {
          // 其他逻辑
          // 这里会检查attrs对象的属性,这里的逻辑意味着props中的属性可以写到attrs中
          checkProp(res, props, key, altKey, true) ||
          checkProp(res, attrs, key, altKey, false);
        }
      }
      return res
    }
    

    即render函数传递数据对象时,props中的内容可以写到attrs对象中。

    特殊特性放在attrs、domProps或组件props

    特殊特性key、ref、slot、scopedSlots是Vue的组件属性,只能放在最外层,不能放在props、attrs、domProps。

    总结

    template形式下总结:

    • 非.prop修饰符的prop只会保存在attrs中
    • .prop修饰符的prop和表单元素等特殊属性的会被保存props中,构建出来对应domProps

    JSX形式下总结:

    • DOM属性只能数据对象domProps属性中,attrs和domProps相对应的可以写在这两个属性中
    • prop属性可以写在props和attrs属性中,template形式.prop修饰的prop需要写在domProps中
    • 特殊特性只能写在最外层,不能写在attrs、props、domProps中

    下一篇文章会具体看v-model语法糖的实现逻辑,其中就会涉及到特殊属性例如表单元素的value等。

    展开全文
  • 核心代码: let dog = { name: 'xiaogou' }; let dogs = []; // 添加对象 dogs.push(dog); console.log(dogs); // 根据对象删除 dogs.splice(dog); console.log(d...


    核心代码:

          let dog = {
            name: 'xiaogou'
          };
          let dogs = [];
          // 添加对象
          dogs.push(dog);
          console.log(dogs);
          // 根据对象删除
          dogs.splice(dog);
          console.log(dogs);
          console.log('dogs.length:'+dogs.length);

     

    效果图:

     

     

    更多技术请关注QQ群:636212586

    展开全文
  • 问题 接口对接,传给后端的查询参数不能是空字符串(只传有值的属性),否则...在请求拦截器中循环判断请求数据对象data中的属性是否为空,如果为空就删除当前属性 添加在之后打印出的请求数据,完美的解决了问题 ...
  • Vue点击当前增加class其他删除class

    万次阅读 2018-06-11 15:02:27
    &lt;li v-for="(item, index) in correList" v-on:click="clickTopUp(item.id)" v-bind:class='{actives:item.id==faceValue}'&gt; {{item.money}}元&lt;br&.../
  • 文章目录Vue 是什么指令v-cloakv-textv-htmlv-prev-once双向数据绑定v-modelmvvmv-onv-on事件函数中传入参数事件修饰符按键修饰符自定义按键修饰符别名v-bind绑定对象绑定class绑定对象和绑定数组 的区别绑定style...
  • Vue 刷新当前页面

    2019-03-29 09:53:48
    在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个...
  • 1.vue优点? 答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb; 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习; 双向数据绑定:保留了angular的特点,在数据操作方面...
  • 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 用vue-router重新路由到当前页面,页面是不进行刷新的 采用window.reload(),或者router.go(0)刷新时,整个浏览器...
  • vue中添加或者删除对象或者数组中的属性的时候,当前对象或者数组中已经添加或者删除了,但是页面中还没有显示出来 原因是:vue组件在初始化渲染的时候,会调用set和get方法,所以该属性是data中的数据,视图层...
  • 文章目录问题描述解决办法案例代码 问题描述 使用Vue脚手架, 联调高德地图 显示window窗口的时候,demo是使用JS创建DOM对象,添加对应事件,实现关闭功能 个人觉得使用JS创建DOM...进入组件的时候,把当前Vue对象...
  • 基础学习vue 实例: 一丶引入vue.js 对于制作原型或学习,你可以这样使用最新版本: <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 对于生产环境,我们推荐...
  • VUE对象添加属性

    万次阅读 2018-01-31 16:02:44
    背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'...
  • 当直接对data里对象增加属性的时候,这时候是没有setter,getter属性的,Vue实例化会遍历data里面的对象的所有的属性,并通过Object.defineProperty()函数把这些属性全部转为 getter/setter。受现代 JavaScript 的...
  • Vue elementUi表格批量删除

    千次阅读 2018-11-05 18:31:50
    第一种方法:通过两数组中对象的属性值是否相同进行删除,但是存在多个相同对象的数据时,会一起删除,不采用。第二种方法:直接通过数组中的数据对象,==号比较,这里注意了"虽然多个对象相同,但并不是同一个引用,...
  • 耗费了一上午的功夫。功能还不能尽善尽美,重点bug太明显严重影响用户体验、大佬一眼看出来问题在哪并给出解决方案。 菜鸟成神的路还很长,掀桌...原想法:在加载组件上面设置一个标志位同时判断是否是当前点击的。...
  • 为什么Vue中数组/对象数据用某些方法的时候。数据变了,页面却没有更新? Vue 实例的数据对象Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有...
  •  //v-for循环就不写了 每一条数据最后都有一个删除的超链 .prevent阻止默认的跳转行为 只执行点击事件 <a href="" @click.prevent="del(item.id)">删除</a> </div> //script <script&...
  • Vue element 删除已上传文件

    千次阅读 2020-09-19 17:18:50
    Vue elment中提供了upload 但是未能给出删除错误文件的方法。因此为解决该问题,采用axios 进行删除。 前端代码 handleRemove(file, fileList) { console.log(file.name, fileList); this.$axios.post('/api/...
  • vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字 点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址:...
  • Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本。 变异方法   Vue 包含一组观察数组的变异方法,它们...
  • Vue.js 删除data数据

    千次阅读 2020-07-02 09:52:39
    1.从当前列表中删除 //从当前列表中删除 this.namelist.splice(scope.index, 1) 2.删除对象中的某个属性 //删除对象中的某个属性 //Vue.delete(this.namelist, 'name') this.$delete(this.form,'members1') ...
  • vue

    2021-01-07 19:18:56
    Vue.js 简介 1.Vue (读音 /vjuː/,类似于 view)的简单认识 (1)Vue是一个渐进式的框架,什么是渐进式的呢? 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。 或者如果你希望将更多的...
  • vue 增加删除splice用法

    千次阅读 2018-02-07 10:21:04
    addWoolType:function(index){  var wooltype = this.$data.wooltype;  wooltype.splice(index+1,0,{}) }, removeWoolType:function(index){  var wooltype = this.$data.wooltype;  if ( woolty...
  • 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个...
  • Vue

    2017-07-30 12:38:01
    对象,它可以包含数据(data) v-model表单控件、模板(template)、挂载元素(el)、方法(methods)、生 命周期钩子(lifecyclehook) $ 除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有...
  • Vue中设置全局的cookie对象

    千次阅读 2019-03-13 16:09:54
    Vue中设置全局的cookie对象封装方法: 在global.js中加入: var cookie = { set: function(key, val, time) { //设置cookie方法 var date = new Date(); //获取当前时间 var expiresDays = time; //将date...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,047
精华内容 9,218
关键字:

vue删除当前对象

vue 订阅