首頁 > web前端 > js教程 > 主體

Vue.js的列表資料的同步更新方法

php中世界最好的语言
發布: 2018-03-13 14:02:18
原創
4447 人瀏覽過

這次帶給大家Vue.js的清單資料的同步更新方法,Vue.js清單資料同步更新方法的注意事項有哪些,以下就是實戰案例,一起來看一下。

陣列的push(),pop(),shift(),unshift(),splice(),sort(),reverse()等都會觸發清單的更新;
filter(),concat (),slice()等不會觸發列表的更新!

下面兩種情形也不會觸發列表資料更新

1.為數組的某一項賦值vm.items[ indexOfItem] = newValue,
2.改變陣列的長度vm.items.length = newLength也不會觸發清單的更新!

要實現的效果:

Vue.js的列表資料的同步更新方法

#清單資料的更新

程式碼:

<template>
  <div id="myapp">
    <ul>
      <li v-for="item in list">
        {{item.name + &#39;-&#39; + item.price}}      </li>
    </ul>
    <button v-on:click="addItem">addItem</button>
  </div></template><script>
  export default {    data: function () {      return {        list: [
          {            name: &#39;apple&#39;,            price: 34
          },
          {            name: &#39;banana&#39;,            price: 56
          }
        ]
      }
    },    methods: {      //点击按钮新增push触发列表数据的更新
      addItem () {        this.list.push({          name: &#39;pinaapple&#39;,          price: 256
        })
      }
    }
  }</script>
登入後複製

為陣列的某一項賦值vm.items[indexOfItem] = newValue不會觸發清單資料的更新,那麼怎麼才能讓他更新資料呢?用Vue的set()方法可以辦到.

   methods: {
      addItem () {//      把数组的第 1 个替换成新的值
        Vue.set(this.list, 1, {
          name: &#39;pinaapple&#39;,
          price: 256
        })
      }
    }
登入後複製

效果圖:

Vue.js的列表資料的同步更新方法

##相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網

其它相關文章!

推薦閱讀:

使用Vue.js有哪些注意事項

#深入JavaScript之DOM的高階應用程式

以上是Vue.js的列表資料的同步更新方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板