Vue中对数组和对象进行遍历和修改方式

目录
  • 对数组和对象进行遍历和修改
    • 1、对数组进行循环
    • 2、 修改数组的时候,不能直接通过下标去增加修改删除
    • 3、对对象进行循环
    • 4、增加对象的时候
  • 修改数组和对象的特殊情况以及修改方法
    • 修改数组的两个特殊情况
    • 修补方法

对数组和对象进行遍历和修改

1、对数组进行循环

v-for进行循环,有两个参数(item,index)

注意:template可以成为占位符,在DOM里面不显示

2、 修改数组的时候,不能直接通过下标去增加修改删除

(1)可以用过push/pop/shift/unshift/splice/sort/reverse方法

(2)也可以直接改变(重新定义)list数组的整体 (var list = [ ])

(3)全局的Vue.set(app7.list,1<此处代表下标>,2)

局部的app7.$set(app7.list,1<此处代表下标>,2)

3、对对象进行循环

v-for进行循环,有三个参数(item,index,key)

4、增加对象的时候

(1)通过重新定义引用的对象 (var obj = { })

(2)set方法 全局的Vue.set(app7.obj,“sex”<此处代表要增加的属性>,“女”)

局部的app7.$set(app7.obj,“sex”<此处代表要增加的属性>,“女”)

<!-- v-for的使用 -->
    <div id="app7">
    // 对数组进行循环
        <template v-for="(item,index) of list" :key="item.id">
            <div>
                {{item.text}} ---- {{index}}
            </div>
            <span>
                {{item.text}} ---- {{index}}
            </span>
        </template>
        //对对象进行循环
        <template v-for="(item,index,key) of obj">
            <div>
                {{item}} ---- {{index}}-----{{key}}
            </div>
        </template>
    </div>
    <script>
            var app7 = new Vue({
            el: '#app7',
            data: {
                list: [
                    {
                        id: "1",
                        text: '1'
                    },
                    {
                        id: "2",
                        text: '2'
                    },
                    {
                        id: "3",
                        text: '3'
                    },
                ],
                obj: {
                    name: 'mao',
                    age: 28,
                    address: 'liulin'
                }
            }
        })
    </script>

修改数组和对象的特殊情况以及修改方法

div部分

  <div id="root">
    {{title}}
    <my-header></my-header>
    {{list}}
    {{obj}}
  </div>
  <div id="app">
    {{title}}
  </div>

script部分

  <script>
    // 全局定义的组件
    Vue.component('my-header', {
      template: `
        <header>title</header>
      `
    })
    // 实例化Vue
    var vm = new Vue({
      el: '#root',
      data: {
        title: 'hello',
        list: ['a', 'b'],
        obj: {
          x: 0
        }
      }
    })
    var vm2 = new Vue({
      el: '#app',
      data: {
        title: 'world'
      }
    })
  </script>

修改数组的两个特殊情况

1.arr.length = 0, 不具备响应特性

2.arr[0] = 100, 不具备响应特性

  • 修改对象的特殊情况
  • 添加obj.x,x属性,也不具备响应特性

修补方法

vm.$set(target, propertyName/index, value)//实例化一个vue,试用贴set属性改变对应的value值
Vue.set(target, propertyName/index, value)//直接使用vue的属性,要与实例化vue方法区分,这个没有$
vm.$forceupdate()

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

(0)

相关推荐

  • vue遍历对象中的数组取值示例

    前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来,以示警戒 改前拿数据 <div class='your-container'> <div class="sortText"> <div>综合排序</div> <div class="sortHot" @click=

  • Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结

    本文实例讲述了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式.分享给大家供大家参考,具体如下: 定义数据: <script> new Vue({ el:"#test", data:{ message:"infor", list:["a","b","c","d","e"], web:{ "百度":"

  • vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)

    目录 深度优先遍历多层数组对象 比如树结构是这样的 vue遍历包含数组的对象 请求来拿到后数据格式是下面这种 最终在html中这样遍历 深度优先遍历多层数组对象 这个方法如果是对于下面的三级树的话可以拿到爷爷Id,自己Id,父亲Id:其实如果想要拿到label的话就把data.id换成data.label就行了 function treeFindPath(tree, func, path = []) {         if (!tree) return []         for (cons

  • vue中的循环遍历对象、数组和字符串

    目录 vue循环遍历对象.数组和字符串 1.循环遍历对象 2.循环遍历数组 3.循环遍历字符串 vue循环遍历,指令v-for 1.循环遍历 2.v-for遍历数组 3.v-for遍历对象 4.v-for使用中添加key vue循环遍历对象.数组和字符串 1.循环遍历对象 1.1vue 在html里面循环遍历对象 v-for=" (val, key , i) in dimItemMap" :key="key" val-每一项 key -key值 i-第几个 <

  • Vue中对数组和对象进行遍历和修改方式

    目录 对数组和对象进行遍历和修改 1.对数组进行循环 2. 修改数组的时候,不能直接通过下标去增加修改删除 3.对对象进行循环 4.增加对象的时候 修改数组和对象的特殊情况以及修改方法 修改数组的两个特殊情况 修补方法 对数组和对象进行遍历和修改 1.对数组进行循环 v-for进行循环,有两个参数(item,index) 注意:template可以成为占位符,在DOM里面不显示 2. 修改数组的时候,不能直接通过下标去增加修改删除 (1)可以用过push/pop/shift/unshift/sp

  • JS中数组与对象的遍历方法实例小结

    本文实例讲述了JS中数组与对象的遍历方法.分享给大家供大家参考,具体如下: 一.数组的遍历: 首先定义一个数组 arr=['snow','bran','king','nightking']; 1.for循环,需要知道数组的长度; 2.foreach,没有返回值,可以不知道数组长度: arr.forEach(function(ele,index){ console.log(index); console.log(ele) }) 3.map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新

  • 解决Vue不能检测数组或对象变动的问题

    来看一个实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script> <style> li:hover

  • vue - props 声明数组和对象操作

    我就废话不多说了,大家还是直接看代码吧~ props: { array: { type: Array, default () { return [] } }, object: { type: Object, default () { return {} } } } 补充知识:Vue项目中,要保证某个部分的高度,应该怎么设置 看代码吧~ .icons overflow: hidden height: 0 padding-bottom: 50% background: green 以上这篇vue -

  • Vue中构造数组数据之map和forEach方法实现

    目录 一.手写实现 二.二者区别 三.使用场景 数组操作是前端最重要的数据操作,构造数组数据,又是数组操作中很常见的.本文将梳理下map和forEach方法在Vue项目中的使用. 想要深入理解这两个方法,一定要手写几次简易的实现,理解其中的要义.这里只考虑核心部分,一些边界问题就忽略了. 一.手写实现 简易map方法: Array.prototype.myMap = function(callback) { const res = []; for (let i = 0; i < this.len

  • vue中更改数组中属性,在页面中不生效的解决方法

    问题描述: 使用vue的方法获取了数组数据,获取数据后为每个数据增加edit属性,初始值均为false,其目的是为了当点击列表中的编辑按钮时,控制保存与不保存的按钮的出现与消失,结果当更改数组中的edit属性后,页面并没有如预期的那样当edit为true时页面显示更改状态,当edit为false时为不更改状态 解决方案: edit是在通过post方法获取数据后增加到vue的data数据中的属性,一开始我的做法先将接收到的数据赋值到vue的data中,再对vue的data中的数据增加edit属性,

  • Vue不能watch数组和对象变化解决方案

    目录 Vue 能监听数组的情况 Vue 无法监听数组变化 举例无法监听数组变化的情况 Vue 无法监听数组变化的解决方案 Vue 监听对象 Vue 设置监听对象 Vue 能监听数组的情况 Vue 监听数组和对象的变化(vue2.x) vue 实际上可以监听数组变化,比如: 直接 = 赋值 data () { return { watchArr: [], }; }, watch: { watchArr (newVal) { console.log('监听:' + newVal); } }, cre

  • vue中watch监听对象中某个属性的方法

    目录 immediate 和 handler deep 深度监听 以currentParams为例,监听selOrgId属性 immediate 和 handler watch 的用法有个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行.如果我们需要在最初绑定值得时候也执行函数,就需要用到 immediate 属性. 'currentParams.selOrgId': { handler(newV, oldV) { console.log("watch", ne

  • 基于vue中css预加载使用sass的配置方式详解

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"

  • vue中移动端调取本地的复制的文本方式

    我就废话不多说了,大家还是直接看代码吧~ _this.$vux.confirm.show({ title: '复制分享链接', content: '分享的内容', onConfirm() { // _this.$vux.toast.text('复制成功') let url = '分享的内容'; let oInput = document.createElement('input'); oInput.value = url; document.body.appendChild(oInput); o

随机推荐