Vue中對數組和對象進行遍歷和修改方式

Posted on by

對數組和對象進行遍歷和修改

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

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：