《vue之列表双向绑定》

前言

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

正文

实现场景一:点击名为addItem的按钮，在名为list数组集合中插入一条数据 

---

 实现步骤如下：

---

1. 渲染按钮：名为addItem

<button v-on:click="addItem">addItem</button>

     2.定义方法，具体方法体实现为在list数组集合中插入一条数据

 methods: {
        // 双向绑定，当点击addItem按钮时，执行如下方法，数组增加一项
        addItem () {
             this.list.push({
                 id: 2,
                 name: 'patch',
                 price: 279
             })
        }
    }

    3.效果图：

---

实现场景二：修改list数组中某一条数据项

---

具体步骤如下：

---

1.在该组件中引入vue

import Vue from 'vue'

2.修改addItem方法的具体实现：

methods: {
        addItem () {
            // 当点击按钮时，想要改变数组集合中某一项的值
            Vue.set(this.list, 1, {
                  id: 2,
                  name: 'patch',
                  price: 236

              })
        }
    }

 3.效果图：

结语：

        千锤万凿出深山，烈火焚烧若等闲。