vue 中 vue.set() 方法有三个参数, 分别为 target(要更改的数据源),key(要更改的具体数据),value(重新赋的值). 下面本篇文章就来给大家介绍一下 vue.set() 方法.
- Vue.set()
- Vue.set( target, key, value )
参数:
target: 要更改的数据源 (可以是对象或者数组)
key: 要更改的具体数据
value : 重新赋的值
官方 API:Vue.set() https://cn.vuejs.org/v2/api/#Vue-set
Vue.set 的使用
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <div id="app2">
- <p v-for="item in items" :key="item.id">
- {{item.message}}
- </p>
- <button @click="btn2Click()">
- 动态赋值
- </button>
- <br/>
- <button @click="btn3Click()">
- 为 data 新增属性
- </button>
- </div>
- <script src="../../dist/vue.min.js">
- </script>
- <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>
- </body>
- </HTML>
此时页面是这样
我点击第一个按钮后运行 methods 中的 btn2Clcick 方法, 此时我要将 Test one 更改为 Change Test
运行后的结果: 此时列表中第一列的 Test one 已经变成了 Change Test
这里得警惕一种情况:
当写惯了 JS 之后, 有可能我会想改数组中某个下标的中的数据我直接 this.items[XX] 就改了, 如:
- btn2Click:function(){
- this.items[0]={message:"Change Test",id:'10'}
- }
我们来看看结果:
这种情况, 是 Vue 文档中明确指出的注意事项, 由于 JavaScript 的限制, Vue 不能检测出数据的改变, 所以当我们需要动态改变数据的时候, Vue.set() 完全可以满足我们的需求.
仔细看的同学会问了, 这不是还有一个按钮吗, 有什么用?
我们还是直接看:
这是初始的列表数据, 数据里面有三个对象
点击之后:
这里可以看出, Vue.set() 不光能修改数据, 还能添加数据, 弥补了 Vue 数组变异方法的不足
Tip:Vue.set() 在 methods 中也可以写成 this.$set()
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/16379.html