vue教程中有这样一个注意事项：

第一种具体情况如下：

运行结果：

当利用索引改变数组某一项时，页面不会刷新。解决方法如下：

运行结果：

三种方式都可以解决，使用Vue.set、vm.$set()或者数组的splice方法。

在做项目的过程中，有个发现，先上代码：

第一个数组通过利用下标改变第二项，第二个数组使用$set()方法改变第二项，根据上面的代码，我们会知道：第一个数组的第二项改变不会在页面更新，只有第二个数组的更改会在页面更新。然而结果却是：

两个数组的的改变都在页面更新了。。

也就是说，$set()方法调用时，页面会全部更新一遍。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script src="vue.js"></script>
  7. <style>
  8. .blue {
  9. color: blue;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div id="example-1">
  15. <ul>
  16. <template v-for="item in items">
  17. <li>
  18. {{$index}}.{{ item.msg }}
  19. <button v-on:click="f5(item)">vm.items.splice(index, 1)</button>
  20. <button v-on:click="f6(item)">vm.remove</button>
  21. </li>
  22. </template>
  23. </ul>
  24. <ul>
  25. <li>
  26. <button v-on:click="f1">vm.items[0] = {} 失效</button>
  27. </li>
  28. <li>
  29. <button v-on:click="f2">vm.items.$set(0, { childMsg: 'Changed!'}) </button>
  30. </li>
  31. <li>
  32. <button v-on:click="f3">vm.items.length = 0 失效</button>
  33. </li>
  34. <li>
  35. <button v-on:click="f4">vm.items={}</button>
  36. </li>
  37. </ul>
  38. <div class="blue">
  39. {{$data | json }}
  40. </div>
  41. <pre>
  42. 因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化：
  43. 直接用索引设置元素，如 vm.items[0] = {}；
  44. 修改数据的长度，如 vm.items.length = 0。
  45. </pre>
  46. </div>
  47. <script>
  48. var vm = new Vue({
  49. el: '#example-1',
  50. data: {
  51. items: [{
  52. msg: 'Foo'
  53. }, {
  54. msg: 'Bar'
  55. }, {
  56. msg: 'George'
  57. }]
  58. },
  59. methods: {
  60. f1: function() {
  61. vm.items[0] = {}; // 失效
  62. },
  63. f2: function() {
  64. vm.items.$set(0, {
  65. childMsg: 'Changed!'
  66. })
  67. vm.items.$set(2, {
  68. msg: 'dongtao!'
  69. })
  70. },
  71. f3: function() {
  72. vm.items.length = 0; // 失效
  73. },
  74. f4: function() {
  75. vm.items = {}
  76. },
  77. f5: function(item) {
  78. var index = this.items.indexOf(item) //Search an array for the item
  79. if (index !== -1) {
  80. this.items.splice(index, 1) //Selects a part of an array, and returns the new array
  81. }
  82. },
  83. f6: function(item) {
  84. this.items.$remove(item)
  85. }
  86. }
  87. })
  88. </script>
  89. </body>
  90. </html>

vue.js中使用set方法 this.$set的更多相关文章

  1. vue.js 中使用（...）运算符报错的解决方法

    vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...

  2. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

  3. vue.js中，input和textarea上的v-model指令到底做了什么？

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  4. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  5. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  6. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  7. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  8. vue.js 中 data, prop, computed, method，watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  9. angular.js和vue.js中实现函数去抖（debounce）

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...

随机推荐

  1. TCP/IP协议学习-1.概述

    目录 TCP/IP协议概述 分层 延伸知识 FTP例子 为什么需要网络层和传输层 TCP/IP的分层 封装 分用 总结 本文主要摘抄自书籍<TCP/IP详解卷一:协议>与TCP协议相关内容 ...

  2. 【HTB系列】靶机Querier的渗透测试

    出品|MS08067实验室(www.ms08067.com) 本文作者:大方子(Ms08067实验室核心成员) 总结与反思: 1.收集信息要全面 2.用snmp-check检查snmp目标是否开启服务 ...

  3. JVM-对象及对象内存布局

    目录 前言 类与对象 对象类二分模型 对象 对象内存布局 JOL工具 对象头 Mark Word 类型句柄 对象头与锁膨胀 无锁 偏向锁 轻量级锁 重量级锁 重量级锁降级 实例数据 填充 对象生命周期 ...

  4. Linux速通01 操作系统安装及简介

    操作系统 # a)操作系统的定义:操作系统是一个用来协调.管理和控制计算机硬件和软件资源的系统程序,它位于硬件和应用程序之间. # 操作系统分为 系统调用接口 和 系统内核 # b)操作系统内核的定义 ...

  5. JVM笔记 -- JVM经历了什么？

    Sun Classic VM 世界上第一款商用 Java 虚拟机,JDK1.4 已经淘汰. 内部只有解释器,可以自己外挂JIT编译器,但是二者只能使用其一,不能配合工作. hotspot 内置了该虚拟 ...

  6. Windows搭建flutter开发环境以及android&idea配置

    Flutter:是谷歌新推出的一款能够支持Android和IOS跨平台开发的全新的UI框架. 拥有自己的一套UI渲染引擎,所以目前的测试数据来看,在性能上面,并没有比原生App性能低多少,所以目前来看 ...

  7. 让JS代码Level提升的忍者秘籍(实用)

    本文章共2377字,预计阅读时间5-10分钟. 前言 没有前言. 你准备好成为同事眼中深藏不露.高深莫测.阳光帅气的前端开发了吗? 那就开始吧! 本文秉承宗旨:代码实用与逼格并存. 提升JS代码Lev ...

  8. 文本编辑工具 Vim与压缩打包

    vim一共有3种模式:一般模式.编辑模式和命令模式 一般模式下的移动光标 光标向左移动:h或者向左的方向键 光标向右移动:l或者向右的方向键光标向上移动:k或者向上的方向键光标向下移动:j或者向下的方 ...

  9. Baolu Aggregate TPS Report

    1.说明 这是一个基于JMeter官方的Aggregate Report的监听器改进而来的监听器!!! 2.插件背景 早在很久之前,宝路就曾经改造过JMeter的Aggregate Report 的源 ...

  10. SSH&SSM

    SSH和SSM的区别 SSH是Spring+Struts+Hibernate的缩写,是一种Web应用程序开源框架.框架系统分为四层:表选层.业务逻辑层.数据持久层和模块层.SSM是Spring+Spr ...