iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >Vue中的Vue.set和this.$set怎么使用
  • 358
分享到

Vue中的Vue.set和this.$set怎么使用

2023-06-29 09:06:53 358人浏览 八月长安
摘要

这篇文章主要介绍“Vue中的Vue.set和this.$set怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue中的Vue.set和this.$set怎么使用”文章能帮助大家解决问题。一、

这篇文章主要介绍“Vue中的Vue.set和this.$set怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue中的Vue.set和this.$set怎么使用”文章能帮助大家解决问题。

Vue中的Vue.set和this.$set怎么使用

一、为什么有Vue.set

由于javascript的限制,Vue无法检测到data中数组和对象的变化,因此也不会触发视图更新。

二、解决方法

数组

1.使用Vue提供的变异方法

Vue中的Vue.set和this.$set怎么使用

Vue对这些js数组方法进行了封装,通过这些方法是可以检测到数组更新的。

2.将原数组整个替换

如下例中,是要实现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 Vue({    el: '#app',    data: {        items: ['a', 'b', 'c']    },    created() {        this.items = ['a', 'test', 'c']    }})</script></body>
3.使用Vue.set(见后文)

对象

1.将原对象整个替换

如下例中,是要实现给object新增一个键值对{test: 'newthing'}

<body><div id="app">    <ul>        <li v-for="(value, name) in object">            {{ name }} : {{ value }}        </li>    </ul></div><script>let vm = new Vue({    el: '#app',    data: {        object: {            title: 'How to do lists in Vue',            author: 'Jane Doe',            publishedAt: '2016-04-10'        }    },    created() {        this.object = {            title: 'How to do lists in Vue',            author: 'Jane Doe',            publishedAt: '2016-04-10',            test: 'newthing'        }    }})</script></body>
2.使用Vue.set(见后文)

三、Vue.set

对于数组

Vue不能检测以下数组的变动:

  • 利用索引值直接设置一个数组项时,例如vm.list[0]=newValue

  • 修改数组长度时,例如vm.list.length=newLength

举个栗子

var vm = new Vue({  data: {    items: ['a', 'b', 'c']  }})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的

这时可以使用Vue.set或者this.$set

使用方法

Vue.set(target,index,newValue)

// Vue.setVue.set(vm.items, indexOfItem, newValue)
// this.$setvm.$set(vm.items, indexOfItem, newValue)

对于对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

举个栗子

var vm = new Vue({  data:{    a:1  }})// `vm.a` 是响应式的vm.b = 2// `vm.b` 是非响应式的
使用方法

Vue.set(target,key,value)

Vue.set(vm.someObject, 'b', 2)
this.$set(this.someObject,'b',2)

注意

Vue不允许动态添加根级响应式属性

const app = new Vue({  data: {    a: 1  }  // render: h => h(Suduko)}).$mount('#app1')Vue.set(app.data, 'b', 2)

Vue中的Vue.set和this.$set怎么使用

只可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性

var vm=new Vue({    el:'#test',    data:{        //data中已经存在info根属性        info:{            name:'小明';        }    }});//给info添加一个性别属性Vue.set(vm.info,'sex','男');

四、使用场景

当我们对data中的数组或对象进行修改时,有些操作方式是非响应式的,Vue检测不到数据更新,因此也不会触发视图更新。此时需要使用Vue.set()进行响应式的数据更新。

关于“Vue中的Vue.set和this.$set怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网精选频道,小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: Vue中的Vue.set和this.$set怎么使用

本文链接: https://www.lsjlt.com/news/323989.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue中的Vue.set和this.$set怎么使用
    这篇文章主要介绍“Vue中的Vue.set和this.$set怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue中的Vue.set和this.$set怎么使用”文章能帮助大家解决问题。一、...
    99+
    2023-06-29
  • Vue.set()和this.$set()使用和区别
    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 当我们去看vue文档的时候,会发现有这么一句话:如果在...
    99+
    2024-04-02
  • Vue.set()和this.$set()的区别是什么
    Vue.set()和this.$set()的区别是什么?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。data () {  return&...
    99+
    2023-06-15
  • vue中this.$set怎么用
    这篇文章给大家分享的是有关vue中this.$set怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。vue中 this.$set的使用背景:在我写前端项目的时候,后端给我们的一个json对象,并且我已经渲染在...
    99+
    2023-06-25
  • Vue.set与this.$set的用法与使用场景介绍
    目录Vue.set()和this.$set()介绍:一。为什么有Vue.set二。解决方法数组对象三。Vue.set对于数组对于对象注意四。使用场景Vue.set()和this.$s...
    99+
    2024-04-02
  • vue中 this.$set的使用详解
    目录vue中 this.$set的使用使用为什么能够响应式?分析总结vue中 this.$set的使用 背景:在我写前端项目的时候,后端给我们的一个json对象,并且我已经渲染在页面...
    99+
    2024-04-02
  • 关于Vue中this.$set的正确使用
    this.#set(obj, key, value) 我们在项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性 <template> <...
    99+
    2022-12-09
    this.$set的使用 vue this.$set
  • vue.set的vue是怎么来的
    Vue.js(简称vue)是一个流行的JavaScript框架,用于构建用户界面。它由尤雨溪于2014年创造,目前已成为Web开发中最受欢迎的框架之一。Vue.js提供了响应式和组件式的架构,可以轻松地开发交互式应用程序,并与其他库和框架无...
    99+
    2023-05-14
  • Vue中使用this.$set()怎么新增数据并更新视图
    本文小编为大家详细介绍“Vue中使用this.$set()怎么新增数据并更新视图”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue中使用this.$set()怎么新增数据并更新视图”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一...
    99+
    2023-07-02
  • vue $set怎么使用
    这篇文章主要讲解了“vue $set怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue $set怎么使用”吧!代码如下:<!-- 操作 -->&nb...
    99+
    2023-07-04
  • Vue的this.$nextTick怎么使用
    这篇“Vue的this.$nextTick怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue的this.$next...
    99+
    2023-07-04
  • Vue中使用this.$set()如何新增数据,更新视图
    目录使用this.$set()新增数据,更新视图描述简单的讲就是说说vue.set() (this.$set)用法使用this.$set()新增数据,更新视图 描述 如果在实例创建之...
    99+
    2024-04-02
  • vue中$set如何使用
    vue中$set如何使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。代码如下:<!-- 操作 --> &...
    99+
    2024-04-02
  • vue中this.$parent的使用方式
    目录vue组件this.$parent一、在实例中二、在组件中调用组件vue子组件this.$parent调用父组件方法报错TypeError:this.parent.xxx is ...
    99+
    2024-04-02
  • vue中Vue.set()的使用以及对其进行深入解析
    目录Vue.set()使用Vue.delete()的使用Vue.set()方法原理解析总结Vue.set()使用 vue 在实例上添加新的属性的时候,该属性,并不是响应式的...
    99+
    2023-01-04
    vue.set()使用 vueset方法 vueset原理
  • vue中this.$createElement方法的使用
    目录vue this.$createElement方法关于createElement使用实例参数说明使用示例源码解读vue this.$createElement方法 element...
    99+
    2024-04-02
  • Vue中this.$nextTick()的具体使用
    目录1、官网说法2、DOM 更新3、获取更新后的 DOM4、小结:this.$nextTick()的使用场景1、官网说法 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后...
    99+
    2023-02-06
    Vue this.$nextTick()
  • Vue报TypeError: this.$set is not a function错误怎么办
    这篇文章主要为大家展示了“Vue报TypeError: this.$set is not a function错误怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习...
    99+
    2024-04-02
  • es6中的set怎么使用
    这篇文章主要讲解了“es6中的set怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“es6中的set怎么使用”吧!本文操作环境:windows7系统、...
    99+
    2024-04-02
  • 怎么使用JavaScript中的this
    本篇内容介绍了“怎么使用JavaScript中的this”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!隐式...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作