Vue可响应式数组方法
<!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可响应式数组方法的更多相关文章
- 浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
- vue深入响应式原理
vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...
- Vue 数据响应式原理
Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...
- vue系列---响应式原理实现及Observer源码解析(一)
_ 阅读目录 一. 什么是响应式? 二:如何侦测数据的变化? 2.1 Object.defineProperty() 侦测对象属性值变化 2.2 如何侦测数组的索引值的变化 2.3 如何监听数组内容的 ...
- Vue的响应式系统
Vue的响应式系统 我们第一次使用Vue的时候,会感觉有些神奇,举个例子: <div id="app"> <div>价格:¥{{price}}</di ...
- 一探 Vue 数据响应式原理
一探 Vue 数据响应式原理 本文写于 2020 年 8 月 5 日 相信在很多新人第一次使用 Vue 这种框架的时候,就会被其修改数据便自动更新视图的操作所震撼. Vue 的文档中也这么写道: Vu ...
- 深入解析vue.js响应式原理与实现
vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...
- Vue的响应式原理
Vue的响应式原理 一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实 ...
- 你是如何理解Vue的响应式系统的
1.响应式系统简述: 任何一个 Vue Component 都有一个与之对应的 Watcher 实例. Vue 的 data 上的属性会被添加 getter 和 setter 属性. 当 Vue Co ...
随机推荐
- docer run 、docker attach 与 docker exec的区别
进入容器的方式有以下三种: 使用ssh登陆进容器 使用nsenter.nsinit等第三方工具 使用Docker本身提供的工具 最佳方案为使用Docker本身提供的工具 docker run:创建和启 ...
- Node教程——API接口开发(Node版的CRUD通用接口的搭建）（MangoDB+Express_Version2）
1. 概述 时间跨度有点大,之前就跟大家唠嗑过一些知识点,也开启了一个Node书写一个后台api项目的开始,出于各种原因,迟迟没有更新博文.现在我把这个坑填上,如果你还有阅读过我之前的文章,我建议你先 ...
- Navicat for MySQL数据库管理工具安装和破解
Navicat for MySQL官方下载地址:https://www.navicat.com/en/download/navicat-for-mysql 1.下载后安装 navicat110_mys ...
- ABAP基础4：模块化
子程序定义 以form开始,以endform结束,用perform语句调用,from语句可以在程序内部/外部,perform一定要写在前面 perform. from. 子程序模块 endform. ...
- ios]企业开发者账号申请
1. 先打电话到“华夏邓白氏公司”(上海:400-820-3536 北京:400-810-3531 广州:800-830-9032),我打的是北京分部的电话,就说自己因为申请apple开发者账号,需要 ...
- Pyqt5_QfileDialog
QfileDialog getOpenFileName getSaveFileName getExistingDirectory getOpenFileName: 就是调用窗口来读取用户选取的文件路径 ...
- 二，表格<table>的使用细节
如有不足请不吝赐教!最先接触的布局表格,表格灵活性,加载速度都不如<div>灵活,但是对于萌新来说再定位某些,例如div里面套文字,而刚接触html+css又不懂得那么多使用<spa ...
- afert和b的伪类画三角形
/* 提示信息 */ .content-tishi{ width: 6.93rem; margin: 0 auto; background: #e9eaea; display: flex; flex- ...
- dsPIC33EP单片机的PPS（外设引脚选择）
利用dsPIC33EP单片机进行can通信的时候用到引脚复用 引脚复用通过查询数据手册: C1RX的寄存器为RPINR26.C1RXR=(设置为需要用到的引脚) 引脚设置为输入(C1RX),TRIS= ...
- css 3 背景图片为渐变色（渐变色背景图片） 学习笔记
6年不研究CSS发现很多现功能都没有用过,例如渐变色,弹性盒子等,年前做过一个简单的管理系统,由于本人美工不好,设计不出好看的背景图片,偶然百度到背景图片可以使用渐变色(感觉发现了新大陆).以后的项目 ...