Vue.set使用场景

最新推荐文章于 2022-12-02 13:02:45 发布
最新推荐文章于 2022-12-02 13:02:45 发布
阅读量191 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuang_nu/article/details/127529919
版权

在原有绑定的数据中已经进行了数据绑定

但需要增加一个或多个新的数据字段 新增的字段没有进行动态绑定 虽然点击界面的加号和减号本身数据会变 但是不会再界面显示 不会渲染在Dom界面

所以需要Vue.set进行数据的绑定 让新增的数据也有数据绑定

这样点击加号和减号就会更新Dom界面

 

 需要注意的是这里需要引入Vue from 'vue' 并且 count的需要写成字符串

fury_123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中$set的使用场景
qq_43592064的博客
03-20 1905
场景1: 通过数组的下标去修改数组的值,数据已经被修改了,但是不触发updated函数,视图不更新, export default { data () { return { items: ['a', 'b', 'c'] }; }, updated () { console.log('数据更新', thi...
Vue源码系列-5- Vue.set() 使用场景以及实现原理?
冲锋
03-29 665
官方api解释了它的使用场景 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’) 所以我们要知道，只有先定义在data 里 数据才具有响应式，如果自己后添加的属性是不具备响应式的 比如下边这个 属性a 具有响应式，但是b ...
vue小知识点（一） vue中的data为什么是函数，不是对象
baizaozao的博客
02-20 3413
如果是对象会导致 对象是引用类型，当同一个组件被多次引用，它们的data都指向同一个内存地址，换句话说，所有组件共享一组data 如何不共享数据 将data设置为一个函数，该函数会返回一个初始数据对象，用function return 其实就相当于申明了新的变量，相互独立 data () { return { items: ['a', '...
Vue里set方法的应用
weixin_46353030的博客
08-03 138
一、应用在数组上 如下例中，是要实现vm.items[1] = ‘excess’ <body> <div id="app"> <ul> <li v-for="(item, index) in items"> {{ index }} : {{ item }} </li> </ul> </div> <script> let vm = new V
从vue源码解析Vue.set()和this.$set()
12-11
Vue.set()和this.$set()应用的场景 平时做项目的时候难免不会对 数组或者对象 进行这样的骚操作操作，结果发现，咦~~，他喵的，怎么页面没有重新渲染。 const vueInstance = new Vue({ data: { arr: [1, 2], obj...
Vue 报错TypeError: this.$set is not a function 的解决方法
12-12
报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应 报错代码： methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: ...
vue实现选中效果.docx
01-21
Vue 实现选中效果是指使用 Vue 框架实现鼠标点击选中的效果，这个效果可以应用于各种场景，例如选择相册图片作为轮播图显示。在 Vue 中，实现选中效果需要数据驱动的思想，数据驱动是一个数据到视图的过程，而不是...
某马机构前端-vue高频面试题.md
02-21
3、如果computed需要对数据修改，需要写get和set两个方法，当数据变化时，调用set方法。 4、computed擅长处理的场景：一个数据受多个数据影响，例如购物车计算总价 侦听属性watch： 1、不支持缓存，数据变，直接会...
【JavaScript源代码】vue Watch和Computed的使用总结.docx
12-29
vue Watch和Computed的使用总结 　目录　01. 监听器watch （1）作用 （2）属性和方法 （3）监听对象 （4）监听数组 02. 计算属性computed （1）计算属性的set方法 （2）区别 （3）使用场景 　01. 监听器watch 　（1...
Vue中this.$set()的使用场景和用法以及与Vue.set()的区别
可口可爱w的博客
09-21 2615
Vue.set( ) 是将 set 函数绑定在 Vue 构造函数上，this.$set() 是将 set 函数绑定在 Vue原型上。当我们给一个对象添加属性时，在控制台上可以打印出来，但是视图却没有更新，此时this.$set()就派上用场了。2）在使用this.$set()的情况下：（直接修改methods中handleClick方法）target：要更改的数据源(可以是对象或者。key：要更改的具体数据。value ：重新赋的值。
整理了几种 Vue.set() 的使用情况
拾一_M的博客
07-19 221
<div id="app"> <button @click="change()">修改</button> <p>{{ arr }}</p> <p>{{ user }}</p> <p>{{ userInfo }}</p> </div> <script src="js/vue.js"></script>
详解Vue.set和this.$set用法与使用场景
Dax1_的博客
03-02 4602
一。为什么有Vue.set 由于JavaScript的限制，Vue无法检测到data中数组和对象的变化，因此也不会触发视图更新 二。解决方法 数组 1.使用Vue提供的变异方法 Vue对这些JS数组方法进行了封装，通过这些方法是可以检测到数组更新的。 2.将原数组整个替换 如下例中，是要实现vm.items[1] = ‘excess’ <body> <div id="app"> <ul> <li v-for="(item, index) i
Vue2中$set的使用
gkx19898993699的博客
12-02 6941
Vue2中$set的使用，如何一定程度上解决双向数据绑定的缺陷
Vue2.0 $set()的正确使用方式
Pany的博客
08-04 14万+
vue2.0 给data对象新增属性，并触发视图更新
Vue.set()和this.$set()的区别和联系，什么场景该用哪一个，清晰明了
黑客与画家
03-20 1043
之前了解这个方法的时候，感觉这一辈子也用不到这个方法，因为当时没有应用场景，但是还真有用的时候????，我相信你们也有用到时候。 从三个方面给大家说一下这个this.set:1.this.set: 1.this.set:1.this.set实现什么功能，为什么要用它？ 2.怎么用它？ 3.应用场景 1.this.set实现什么功能，为什么要用它？当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.set实现什么功能，为什么要用它？ 当你发现你给对象加了
vue中$set用法详细讲解
热门推荐
Oralinge
12-16 16万+
地址没有改变，vue就监测不到数据变化。这个时候，双向绑定就失效了。
vue中$set的使用（结合在实际应用中遇到的坑）
weixin_42667944的博客
07-27 4330
1、前言 在我们使用vue进行开发中，可能会碰到一种情况，当已经生成vue实例后，再次去给数据赋值或者添加数据，并不能同步更新到数据上面去。 在官方文档中发现这么一段话： 受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 da...
vue $set的使用
阿妖的博客
11-13 1073
使用场景: 当vue想直接修改数组的元素时, 这个使用需要使用this.$set()来修改数组 如果直接修改数组且不使用this.$set(), 则会出现页面延迟响应数据的结果 使用方法: this.$set(array,index,value) array: 是你需要的数组 index: 是你要修改的元素的下标 value: 是你最新的值 let array = [ {name:'张三',age:12}, {name:'李四',age:13}, {name:'王五'
vue中this.$set和vue.set的区别
最新发布
04-16
区别在于使用场景，this.$set 主要用于在 Vue 实例中使用，而 Vue.set 可以用于任何的 Vue 实例或者非 Vue 对象。同时，this.$set 是实例方法，需要通过 Vue 实例的 $set 方法来调用，而 Vue.set 是静态方法，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值