Vue 数组响应
响应渲染
在Vue中，被渲染的数据都是响应式的，即Vue实例中进行改变页面中也会跟着改变：
<body>
<div id="app">
<p>{{count}}</p>
<button @click="count++">+</button>
<button @click="count--">-</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
count:0,
},
})
</script>
</body>
数组响应
但是如果数据源是一个数组的话，它的有一些操作并不是响应式的，如通过索引来操纵数组。
如下所示，当我点击按钮使用索引修改元素后，数组中的元素确实发生了改变，但是页面的渲染效果并未发生改变，所以索引是未响应式的：
<body>
<div id="app">
<ul>
<li v-for="(value,index) in array" :key="value">{{index + 1}}-{{value}}</li>
</ul>
<button @click.once=func()>改变</button>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
array: [
"A", "B", "C", "D",
]
},
methods: {
func() {
this.array[0] = 'a';
},
},
});
</script>
</body>
变异方法
下面这些方法都是经过Vue封装后的方法。使用与原生Js使用相同，但是他们是响应式的。
| 方法 | 描述 |
|---|---|
| push() | 追加末尾，将元素压入数组尾部 |
| unshift | 追加头部，将元素压入数组头部 |
| pop() | 弹出末尾，将数组中最后一个元素弹出 |
| shift() | 弹出头部，将数组中第一个元素弹出 |
| splice() | 可以添加、删除、替换数组中的元素 |
| sort() | 排序 |
| reverse() | 翻转 |
Vue 数组响应的更多相关文章
- vue 数组 新增元素 响应式原理 7种方法
1.问题 思考一个问题,以下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- Vue可响应式数组方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue深入响应式原理
vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...
- 由自定义事件到vue数据响应
前言 除了大家经常提到的自定义事件之外,浏览器本身也支持我们自定义事件,我们常说的自定义事件一般用于项目中的一些通知机制.最近正好看到了这部分,就一起看了下自定义事件不同的实现,以及vue数据响应的基 ...
- Vue 数据响应式原理
Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...
- 深入解析vue.js响应式原理与实现
vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...
- vue系列---响应式原理实现及Observer源码解析(一)
_ 阅读目录 一. 什么是响应式? 二:如何侦测数据的变化? 2.1 Object.defineProperty() 侦测对象属性值变化 2.2 如何侦测数组的索引值的变化 2.3 如何监听数组内容的 ...
- Vue的响应式系统
Vue的响应式系统 我们第一次使用Vue的时候,会感觉有些神奇,举个例子: <div id="app"> <div>价格:¥{{price}}</di ...
- 仿VUE创建响应式数据
VUE对于前端开发人员都非常熟悉了,其工作原理估计也都能说的清个大概,具体代码的实现估计看的人不会太多,这里对vue响应式数据做个简单的实现. 先简单介绍一下VUE数据响应原理,VUE响应数据分为对象 ...
- 一探 Vue 数据响应式原理
一探 Vue 数据响应式原理 本文写于 2020 年 8 月 5 日 相信在很多新人第一次使用 Vue 这种框架的时候,就会被其修改数据便自动更新视图的操作所震撼. Vue 的文档中也这么写道: Vu ...
随机推荐
- Openfoam Pstream类探索
对于数值仿真而言,无论是商软或者开源并行计算都是非常重要的,而且想把自身数值仿真能力提升一个层次,必须对并行计算有很好的理解与应用 openfoam并行通信主要通过Pstream类完成 本篇文章进行说 ...
- word、excel、pdf等多种格式在线预览
第一种方式: 具体功能说明: http://view.xdocin.com/index.html 调用案例: <a href="http://www.xdocin.com/xdoc?_ ...
- 好消息！微信小程序开发环境自带vConsole
背景介绍 事情是这样子的,我们在开发小程序的时候,需要在真机上把相关的日志打出来以便进行问题定位和回溯,于是在编程界就有个今天这个新闻.------ 好消息!广东某男子发现微信小程序开发环境自带vCo ...
- 通过 Blob 创建下载文件
Blob 如上图所示,Blob 对象有三个部分组成,data:image/jpeg 表示该 Blob 是什么类型的文件.base64 是一个二进制到文本的编码,更多细节查看Base64 编码/解码.其 ...
- Hugging Face 每周速递: Space 支持创建模版应用、Hub 搜索功能增强、BioGPT-Large 还有更多
每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...
- LeetCode-2024 考试的最大困扰度
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/maximize-the-confusion-of-an-exam 题目描述 一位老师正在出一场由 ...
- vue学习笔记：Vue生命周期
概念 一个Vue 实例从开始创建.初始化数据.编译模板.挂载 DOM.渲染→更新→渲染.卸载等一系列过程,这就是 Vue 的生命周期.同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不 ...
- CMT: Convolutional Neural Networks Meet Vision Transformers概述
0.前言 相关资料: arxiv github 论文解读(CSDN,CSDN) 论文基本信息: 作者单位:华为诺亚, 悉尼大学 发表时间:CVPR2022(2021.7.13) 1.针对的问题 当前将 ...
- k8s之service服务
service服务介绍 在k8s中,pod是应用程序的载体,我们可以通过pod的ip来访问应用程序,但是pod的ip地址不是固定的,这也就意味着不方便直接采用pod的ip对服务进行访问 为了解决这个问 ...
- centos7端口转发工具rinetd
1.下载软件 wget http://li.nux.ro/download/nux/misc/el7/x86_64/rinetd-0.62-9.el7.nux.x86_64.rpm 2.安装软件 yu ...