<!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Title</title>

 </head>

 <body>

 <div id="app">

   <ul>

     <li v-for="i in letters">{{i}}</li>

   </ul>

   <button @click="btnClick">按钮</button>

 </div>

 <script src="../vuejs/vue.js"></script>

 <script>

   const app = new Vue({

     el: '#app',

     data: {

       message: "",

       letters: ["a","b","d","c"],

     },

     methods: {

       btnClick(){

         // ...items类似于python *args

         // 1. .push方法，在最后添加，可同时添加多个

         // this.letters.push("A","B")

         // 2. .pop() 删除数组中的最后一个元素

         // this.letters.pop()

         // 3.  .shift()方法，删除数组中的第一个元素

         // this.letters.shift()

         // 4.  .unshift()方法，在数组最前面添加元素

         // this.letters.unshift("A","B")

         //splice(start: number, deleteCount: number, ...items: T[]): T[];

         // 5.  .splice方法，作用：删除元素/替换元素/插入元素

         // 第一个参数：位置参数

         // 删除元素：第二个元素传入你要删除几个元素（如果没传，就删除位置后面的所有元素）

         //替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素（可理解为前面删除，后面追加）

        // 插入元素：第二个参数，传入0，并且后面跟上要插入的元素

        //  this.letters.splice(1,2)

        //  this.letters.splice(1,2,"A","B","C")

        //  this.letters.splice(1,0,"A","B","C")

       //  6.  .sort  排序

       //   this.letters.sort()

         // 7.  .reverse方法，反转

         // this.letters.reverse()

  // 8.注意，通过索引值修改数组中的元素不是Vue的响应式

  //            this.letters[0] = "bbbbbb";

         // 可以用splice纠正

         //       this.letters.splice(0,1,"bbbbbb")

       //  9.  Vue内部方法：

         //  set（要修改的对象，索引值，修改后的值）

         // Vue.set(this.letters,0,"修改啦")

       },

     }

   })

 </script>

 </body>

 </html>

Vue可响应式数组方法的更多相关文章

  1. 浅谈Vue响应式(数组变异方法)

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

  2. vue深入响应式原理

    vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...

  3. Vue 数据响应式原理

    Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...

  4. vue系列---响应式原理实现及Observer源码解析(一)

    _ 阅读目录 一. 什么是响应式? 二:如何侦测数据的变化? 2.1 Object.defineProperty() 侦测对象属性值变化 2.2 如何侦测数组的索引值的变化 2.3 如何监听数组内容的 ...

  5. Vue的响应式系统

    Vue的响应式系统 我们第一次使用Vue的时候,会感觉有些神奇,举个例子: <div id="app"> <div>价格:¥{{price}}</di ...

  6. 一探 Vue 数据响应式原理

    一探 Vue 数据响应式原理 本文写于 2020 年 8 月 5 日 相信在很多新人第一次使用 Vue 这种框架的时候,就会被其修改数据便自动更新视图的操作所震撼. Vue 的文档中也这么写道: Vu ...

  7. 深入解析vue.js响应式原理与实现

    vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...

  8. Vue的响应式原理

    Vue的响应式原理 一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实 ...

  9. 你是如何理解Vue的响应式系统的

    1.响应式系统简述: 任何一个 Vue Component 都有一个与之对应的 Watcher 实例. Vue 的 data 上的属性会被添加 getter 和 setter 属性. 当 Vue Co ...

随机推荐

  1. 蒲公英 · JELLY技术周刊 Vol.07: EcmaScript 2020 -- 所有你想要知道的都在这

    「蒲公英」期刊,每周更新,我们专注于挖掘「基础技术.工程化.跨端框架技术.图形编程.服务端开发.桌面开发.人工智能」等多个大方向的业界热点,并加以专业的解读:不仅如此,我们还精选凹凸技术文章,向大家呈 ...

  2. Django之from.Form内置字段

    from django import forms Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内 ...

  3. jquery.min.js v1.10.3版本autocomplete方法会在text前添加搜索出多少项的文本信息 要去除

    http://stackoverflow.com/questions/13011127/how-to-remove-change-jquery-ui-autocomplete-helper-text ...

  4. Deno会在短期内取代Node吗？

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/what-is-deno-and-will-it-r ...

  5. Java常用设计模式详解1--单例模式

    单例模式:指一个类有且仅有一个实例 由于单例模式只允许有一个实例,所以单例类就不可通过new来创建,而所有对象都默认有一个无参的构造函数可以创建对象,所以单例类不仅不能提供public的构造方法,还需 ...

  6. BZOJ1017 树形DP

    1017: [JSOI2008]魔兽地图DotR Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: 2308  Solved: 919[Submit][S ...

  7. Istio 将被捐赠给开源基金会 | 云原生生态周报 Vol. 47

    作者 | 陈俊.徐迪.陈有坤.李鹏.敖小剑 业界要闻 1.Google Cloud CEO 表示将把 Istio 项目捐赠给基金会 Istio 项目找到了理想的发展方向: 捐赠给开源基金会. 2.Ko ...

  8. HTML开发实例-简单相亲网站开发（主体为table）

    实现功能:简单的相亲网站: 清楚不常在,抓紧谈恋爱 我承诺 年满十八岁 单身 抱着严肃态度 寻找真诚的另一半 性别: 男 女 生日: --请选择年-- 2019 2020 2021 --请选择月-- ...

  9. HTTP 规范中的那些暗坑

    HTTP 协议可以说是开发者最熟悉的一个网络协议,「简单易懂」和「易于扩展」两个特点让它成为应用最广泛的应用层协议. 虽然有诸多的优点,但是在协议定义时因为诸多的博弈和限制,还是隐藏了不少暗坑,让人一 ...

  10. 大O符号初学者指南

    原文地址:https://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/ 计算机科学中,大O表示法被用来描述一个算法的性能或复杂度. ...