215、Vue.set应用实例

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app2">
    <p v-for="item in items" :key="item.id">
      {{item.message}}
    </p>
    <button class="btn" @click="btn2Click()">动态赋值</button><br />
    <button class="btn" @click="btn3Click()">为data新增属性</button>
  </div>
</body>

</html>
<script>
  var vm2 = new Vue({
    el: "#app2",
    data: {
      items: [
        { message: "Test one", id: "1" },
        { message: "Test two", id: "2" },
        { message: "Test three", id: "3" }
      ]
    },
    methods: {
      btn2Click: function () {
        Vue.set(this.items, 0, { message: "Change Test", id: '10' })
      },
      btn3Click: function () {
        var itemLen = this.items.length;
        Vue.set(this.items, itemLen, { message: "Test add attr", id: itemLen });
      }
    }
  });
</script>

猜你喜欢

转载自www.cnblogs.com/gushixianqiancheng/p/13182450.html