前言
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
正文
实现场景一:点击名为addItem的按钮,在名为list数组集合中插入一条数据
实现步骤如下:
- 渲染按钮:名为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.效果图:
结语:
千锤万凿出深山,烈火焚烧若等闲。