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

由于 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请求过来的数据中的某一项值的方法(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 在 <template> <div> <ul> <li v-for = " (item,index) in list" v-text='`${item} - ${index} `'>&

  • 对pandas中iloc,loc取数据差别及按条件取值的方法详解

    Dataframe使用loc取某几行几列的数据: print(df.loc[0:4,['item_price_level','item_sales_level','item_collected_level','item_pv_level']]) 结果如下,取了index为0到4的五行四列数据. item_price_level item_sales_level item_collected_level item_pv_level 0 3 3 4 14 1 3 3 4 14 2 3 3 4 14

  • java中有无参数和返回值的方法详解

    目录 java有无参数和返回值 以下的例子要细细查看 方法的返回值和参数 1.返回值 2.参数 java有无参数和返回值 首先,定义一个土豪类(LocalTyrant) 属性:name moeney smoke 行为一:(无参数无返回值): 行为二:(无参数有返回值): 行为三:(有参数有返回值): 行为四:(有参数无返回值): 以下的例子要细细查看 慢慢分析,切不可急于求成 package cm.tr; class LocalTyrant{ String name; int money; St

  • Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解

    目录 初识vue 模板语法 插值语法 指令语法 数据绑定 单向绑定 双向绑定 el和data的两种写法 el data Object.defineProperty方法 事件处理 事件修饰符 键盘事件 定义命名(不常用) 初识vue vue工作时,必须先创建Vue实例,且要传入一个配置对象 容器内的代码依然符合html规范,混入了一些特殊的Vue语法 <div id="root"> <h1>hello,{{name}}</h1> </div>

  • vue 父组件通过$refs获取子组件的值和方法详解

    前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调

  • 在Android中使用WebSocket实现消息通信的方法详解

    前言 消息推送功能可以说移动APP不可缺少的功能之一,一般简单的推送我们可以使用第三方推送的SDK,比如极光推送.信鸽推送等,但是对于消息聊天这种及时性有要求的或者三方推送不满足业务需求的,我们就需要使用WebSocket实现消息推送功能. 基本流程 WebSocket是什么,这里就不做介绍了,我们这里使用的开源框架是https://github.com/TakahikoKawasaki/nv-websocket-client 基于开源协议我们封装实现WebSocket的连接.注册.心跳.消息分

  • Android中gson、jsonobject解析JSON的方法详解

    Android中gson、jsonobject解析JSON的方法详解

    JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的支持),从而可以在不同平台间进行数据交换.JSON采用兼容性很高的文本格式,同时也具备类似于C语言体系的行为. JSON对象: JSON中对象(Object)以"{"开始, 以"}"结束. 对象中的每一个item都是一个key-value对, 表现为"key:value"的形式, ke

  • JavaScript中数组去重常用的五种方法详解

    目录 1.对象属性(indexof) 2.new Set(数组) 3.new Map() 4.filter() + indexof 5.reduce() + includes 补充 原数组 const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; 1.对象属性(indexof) 利用对象属性key排除重复项 遍历数组,每次判断新数组中是否存在该属性,不存在就存储在新数组中 并把数组元素作为key,最后返

  • 在Vue2中注册全局组件的两种方法详解

    第一种:在main.js中直接注册 //引入 import FixedTop from '@/components/FixedTop //注册为全局组件 Vue.componet('FixedTop',FixedTop) //页面直接使用 <FixedTop /> 缺点:如果我们需要注册的全局组件非常多,那么需要一个一个引入,然后分别调用Vue.componet方法,main.js文件会变得很大很臃肿,不好维护,所以当需要注册的全局组件非常多的时候可以采用插件的形式注册 第二种:使用插件的形式

  • javascript ES6中set集合、map集合使用方法详解与源码实例

    set与map理解 ES6中新增,set集合和map集合就是一种数据的存储结构(在ES6之前数据存储结构只有array,object),不同的场景使用不同的集合去存储数据 set集合 Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用. set集合语法: //创建一个set集合,传参为一个可迭代的对象 const s1 = new Set(iterable); API 名称 类型 简介 Set.add() 原型方法 添加数据 Set.has() 原型方法 判断是否存在一个数据 S

随机推荐