改变vue请求过来的数据中的某一项值的方法(详解)


Posted in Javascript onMarch 08, 2018

由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

当你修改数组的长度时,例如:vm.items.length = newLength

<template>
 <div>
  <ul>
   <li v-for = " (item,index) in list" v-text='`${item} - ${index} `'></li>
  </ul>
  <button @click="change3">改变数组第2个值,改成0</button>
  <button @click="change4">改变数组第2个值,改成5</button>
 </div>
</template>
<script>
import Vue from 'vue'
export default {
 data () { 
  return {
   list : [ 1, 2, 3, 4],
   list2 : [ 7, 8, 9, 0 ]
  }
 },
 methods : {
  //通过下标来改变整个数组里的值也是行不通的
  changeList () {
   this.list[2] = 3
  },
  //通过数组长度改变改个数组里的值是行不通的
  changeList2 () {
   this.length = 1
  },
  //第一我们可以通过,vue.set实列方法来改变,但我们要在开头再引一入下vue包
  // 1 第一个值代表需要改变的数组
  // 2 第二个代表改变那一项
  // 3 第三个代表改成什么值
  //样式语法 Vue.set(example1.items, indexOfItem, newValue)
  change3 () {
   Vue.set(this.list,1,0)
  },
  //通过 Array.prototype.splice 数组原型上的方法来改变整个数组的长度或者内容
  //这个方法大家肯定常用,我就不细说了
  change4 () {
   this.list.splice(1,1,5)
  }
 }
}
</script>

这里因为操作问题我就在代码中直接写了注释,更加能让大家清楚的了解,如何通过那些方法改变数组的长度,改变下标的某一个元素。

以上这篇改变vue请求过来的数据中的某一项值的方法(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
JavaScript满天星导航栏实现方法
Mar 08 #Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 #Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 #Javascript
layui select动态添加option的实例
Mar 07 #Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 #Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 #Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 #Javascript
You might like
使用GD库生成带阴影文字的图片
2015/03/27 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
利用Python读取txt文档的方法讲解
2018/06/23 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
pandas按条件筛选数据的实现
2021/02/20 Python
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
领导干部培训感言
2014/01/23 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
请假条范文大全
2014/04/10 职场文书
财务人员担保书
2014/05/13 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
九九重阳节致辞
2015/07/31 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript