×

Vue基础应用:遍历和修改数组和对象的方式

作者:Terry2022.12.11来源:Web前端之家浏览:491评论:0
关键词:vuejs

Vue基础应用:遍历和修改数组和对象的方式。

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

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>

JS

  <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()

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20221211.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • jianj

    node看上有点复杂...

  • 访客

    正好遇到,谢谢分享...

  • jimmy

    这个很有趣,国内SEO更多的是百度...

  • jenny

    VUE的总结的不错啊,收藏了。下次搞点React的啊...

  • jenny

    win7最经典,想当初win8出来后都没它好用,怀恋经典。。。...

  • Terry

    谢谢提醒,插件已经修复。...

  • 访客

    士大夫士大夫...

  • 访客

    用這甚麼顏色...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2023 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2