改变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 相关文章推荐
Javascript 兼容firefox的一些问题
May 21 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
BootStrap中的表单大全
Sep 07 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
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
php第一次无法获取cookie问题处理
2014/12/15 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
python指定写入文件时的编码格式方法
2018/06/07 Python
基于python历史天气采集的分析
2019/02/14 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
自荐信结尾
2013/10/27 职场文书
银行实习生的自我评价
2013/12/09 职场文书
军训学生自我鉴定
2014/02/12 职场文书
主题团日活动总结
2014/06/25 职场文书
电力培训心得体会
2014/09/02 职场文书
公司授权委托书
2014/10/17 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
十七岁的单车观后感
2015/06/12 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书