vue基础篇---修改对象或数组的值,页面实时刷新
2023-09-11 14:15:07 时间
这个问题估计大家很难想到,如果一个数组[1,2,3,4],然后我们v-for遍历,我们改变数组的值,arr[1] = 5 ,难道不应该改变么?按理说根据vue的特性应该是改变的,但是事实上确实数组已经改变了,但是页面上面却没有变化。有三种解决办法。
1.通过7个特定的api方法来实现
push pop shift unshift splice sort reverse
如果我们想要实现上面说的效果就 这样写:vm.list.splice(2,1,5) //意思是把list这个数组的坐标为二的值开始,删除1个,然后添加一个5
2.通过改变对象地址的方法来实现
说白了就是 vm.list=[1,5,3,4] 重新赋值
3.通过set的方法来实现
Vue.set(vm.list,1,5) // Vue 对象
vm.$set(vm.list,2,6) // Vue 实例
相关文章
- Vue笔记:vue-router
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue- 绑定的图片不显示
- vue.js入门(五,组件更新,计算属性,watch监听)
- VSCODE平台上使用VU3 遇到报错 提示找不到VUE模块
- vue- element-ui table复选框翻页记忆与清除
- [Vue @Component] Simplify Vue Components with vue-class-component
- vue.js3:使用clipboard.js实现复制到剪贴板(vue@3.2.37 / clipboard@2.0.11)
- vue.js3:在css中使用变量(vue@3.2.6)
- [Vue @Component] Pass Props to Vue Functional Templates
- [Vue @Component] Simplify Vue Components with vue-class-component
- thinkphp6:前后端分离使用表单令牌(php 8.1.1 / thinkphp v6.0.10LTS/vue 3.2.26)
- 【视频】vue组件的局部注册
- 验证:使用node 12.18.4版本安装vue cli4没有问题(先卸载vue cli2再安装)
- standalone vue initialization process - Vue应用的初始化过程
- vue 请求报错 Network Error ,没有其他报错信息-解决
- Vue中vue-i18n结合vant-ui实现国际化
- Vue中vue-i18n结合element-ui实现国际化
- 117:vue+openlayers: 实时显示zoom,并显示左下、左上、右上、右下的坐标 ( 示例代码 )
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- 【vue生命周期】
- 【三十天精通Vue 3】第十二天 Vue 3 的函数式组件详解(过滤器已废弃)
- Vue中npm run dev 和 npm run serve区别