编写Vue项目,如何给数组的第一位添加对象数据

 更新时间:2022年04月21日 10:37:47   作者:郭宝  
这篇文章主要介绍了编写Vue项目,如何给数组的第一位添加对象数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue给数组第一位添加对象数据

核心代码如下:

     this.menuBar.unshift({
          title:"全部",
          id:13
        })

全部代码如下:

    data(){
        return { 
          menuBar:[
            {
              title:"家具生活",
              id:14
            },
            {
              title:"摄影设计",
              id:15
            },
            {
              title:"明星美女",
              id:16
            },
            {
              title:"空间设计",
              id:17
            },
            {
              title:"户型装饰",
              id:18
            },
            {
              title:"广告摄影",
              id:19
            },
            {
              title:"摄影学习",
              id:20
            },
            {
              title:"摄影器材",
              id:21
            },
            {
              title:"明星写真",
              id:22
            },
            {
              title:"青春甜美",
              id:23
            },
            {
              title:"古典美女",
              id:24
            },
          ],
 
        }
      },
      created(){ 
 
        /*在数组的第一位添加对象数据*/
        this.menuBar.unshift({
          title:"全部",
          id:13
        }) 
      },

给数组添加新对象并赋值

方法一

适用于数组就只有一组

listData: [{name:"张三",age:18}],
//直接添加对象
listData.sex="男"

方法二

适用于数组中有多组信息

listData:[],
list:[{"张三","李四"}]
//比如想把另外一个数组中编列出来的值加入到这个数组中
   for (let index = 0; index < this.listlist.length; index++) {
          this.listData.push({ name: "" });
          this.listData[index].name= this.list[index];
        }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue使用Highcharts实现不同高度的3D环形图

    vue使用Highcharts实现不同高度的3D环形图

    这篇文章主要为大家详细介绍了vue使用Highcharts实现不同高度的3D环形图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 使用vue如何构建一个自动建站项目

    使用vue如何构建一个自动建站项目

    这篇文章主要介绍了使用vue如何构建一个自动建站项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue+element多选级联选择器自定义props使用详解

    vue+element多选级联选择器自定义props使用详解

    这篇文章主要给大家介绍了关于vue+element多选级联选择器自定义props使用的相关资料,级联选择器展示的结果都是以数组的形式展示,也就是v-model绑定的结果,需要的朋友可以参考下
    2023-07-07
  • Vue监听localstorage变化的方法详解

    Vue监听localstorage变化的方法详解

    在日常开发中,我们经常使用localStorage来存储一些变量,这些变量会存储在浏览中,对于localStorage来说,即使关闭浏览器,这些变量依然存储着,方便我们开发的时候在别的地方使用,本文就给大家介绍Vue如何监听localstorage的变化,需要的朋友可以参考下
    2023-10-10
  • .netcore+vue 实现压缩文件下载功能

    .netcore+vue 实现压缩文件下载功能

    这篇文章主要介绍了.netcore+vue 实现压缩文件下载功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • uniapp使用uview的简单案例

    uniapp使用uview的简单案例

    uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,这篇文章主要给大家介绍了关于uniapp使用uview的简单案例,需要的朋友可以参考下
    2023-03-03
  • 使用vue-cli(vue脚手架)快速搭建项目的方法

    使用vue-cli(vue脚手架)快速搭建项目的方法

    本篇文章主要介绍了使用vue-cli(vue脚手架)快速搭建项目的方法,vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • openlayers6之地图覆盖物overlay详解

    openlayers6之地图覆盖物overlay详解

    overlay就是在地图上以另外一种形式浮现在地图上,常见的地图覆盖物为这三种类型,如:popup 弹窗、label标注信息、text文本信息等,接下来跟随小编看下openlayers6之地图覆盖物overlay详解,一起看看吧
    2021-09-09
  • vue+element实现表格新增、编辑、删除功能

    vue+element实现表格新增、编辑、删除功能

    这篇文章主要为大家详细介绍了vue+element实现表格新增、编辑、删除功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue路由插件之vue-route

    vue路由插件之vue-route

    这篇文章主要介绍了vue路由插件之vue-route的相关知识,本文通过实例代码给大家介绍了vue router的使用,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06

最新评论