Vue.set()动态的新增与修改数据,触发视图更新的方法

 更新时间:2018年09月15日 15:42:56   作者:叶落森  
今天小编就为大家分享一篇Vue.set()动态的新增与修改数据,触发视图更新的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

参数:

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据(可以是字符串和数字)

value :重新赋的值

用法:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。

例:

data:{
   namelist:[
     {message:"叶落森",id:"1"},
     {message:"姜艳霞",id:"2"},
     {message:"姜小帅",id:"3"}
   ]
},
 Vue.set(this.namelist,1,{message:"yeluosen",id:"1"})

注:Vue.set()在methods中也可以写成this.$set()

Vue.set()不光能修改数据,还能添加数据

data:{
   items:[
     {message:"Test one",id:"1"},
     {message:"Test two",id:"2"},
     {message:"Test three",id:"3"}
   ]
},
var itemLen=this.items.length;
Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});

以上这篇Vue.set()动态的新增与修改数据,触发视图更新的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue在线预览word、excel、pdf、txt、图片的方法实例

    vue在线预览word、excel、pdf、txt、图片的方法实例

    最近工作中遇到了一个需要在线预览文件的需求,所以这篇文章主要给大家介绍了vue在线预览word、excel、pdf、txt、图片的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 使用vite构建vue3项目的实现步骤

    使用vite构建vue3项目的实现步骤

    通过本文,您可以了解如何使用Vue CLI创建Vue 3项目,配置Vite,利用其优势进行开发,具有一定的参考价值,感兴趣的可以了解一下
    2023-08-08
  • 解决iView中时间控件选择的时间总是少一天的问题

    解决iView中时间控件选择的时间总是少一天的问题

    下面小编就为大家分享一篇解决iView中时间控件选择的时间总是少一天的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue3组合式API中如何优化列表渲染性能

    Vue3组合式API中如何优化列表渲染性能

    这篇文章主要为大家详细介绍了在Vue3组合式API中如何优化列表渲染性能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-12-12
  • 解决ant Design中Select设置initialValue时的大坑

    解决ant Design中Select设置initialValue时的大坑

    这篇文章主要介绍了解决ant Design中Select设置initialValue时的大坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue.js管理后台table组件封装的方法

    vue.js管理后台table组件封装的方法

    table作为数据展示组件,在日常开发中经常被用到,这篇文章主要给大家介绍了关于vue.js管理后台table组件封装的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • Vue3管理后台项目使用高德地图选点的实现

    Vue3管理后台项目使用高德地图选点的实现

    本文主要介绍了Vue3管理后台项目使用高德地图选点的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • VueJS组件之间通过props交互及验证的方式

    VueJS组件之间通过props交互及验证的方式

    本篇文章主要介绍了VueJS组件之间通过props交互及验证的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-09-09
  • Vue中的Props(不可变状态)

    Vue中的Props(不可变状态)

    这篇文章主要介绍了Vue中的Props(不可变状态),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue.Draggable实现拖拽效果

    Vue.Draggable实现拖拽效果

    这篇文章主要介绍了Vue.Draggable实现拖拽效果,使用简单方便 ,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论