Vue常用特性-数组变异方法与动态数组响应式数据
时间:2020-11-30
本文章向大家介绍Vue常用特性-数组变异方法与动态数组响应式数据,主要包括Vue常用特性-数组变异方法与动态数组响应式数据使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
数组变异方法
-
在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变
-
变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展
push() | 往数组最后面添加一个元素,成功返回当前数组的长度 |
---|---|
pop() |
删除数组的最后一个元素,成功返回删除元素的值 |
shift() |
删除数组的第一个元素,成功返回删除元素的值 |
unshift() |
往数组最前面添加一个元素,成功返回当前数组的长度 |
splice() |
有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除 后想要在原位置替换的值 |
sort() |
sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组 |
reverse() |
reverse() 将数组倒序,成功返回倒序后的数组 |
替换数组
-
不会改变原始数组,但总是返回一个新数组
filter | filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。 |
---|---|
concat | concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组 |
slice | slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组,而是返回一个子数组 |
<body> <div id="app"> <div> <input type="text" v-model='fname'> <button v-on:click='add'>提交</button> <button @click='del'>删除</button> <button @click='change'>替换</button> </div> <ul> <li :key='index' v-for='(item,index) in list'>{{item}}</li> </ul> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { fname: '', list: ['lemon', 'banana', 'apple'] }, methods: { add: function () { this.list.push(this.fname); }, del: function () { this.list.pop(); }, change: function () { // 替换数组 this.list = this.list.slice(0, 2); } } }) </script> </body>
动态数组响应式数据
-
Vue.set(a,b,c) 让 触发视图重新更新一遍,数据动态起来
-
a是要更改的数据 、 b是数据的第几项、 c是更改后的数据
<body> <div id="app"> <ul> <li :key='index' v-for='(item,index) in list'>{{item}}</li> </ul> <div>{{info.uname}}</div> <div>{{info.age}}</div> <div>{{info.gender}}</div> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { list: ['apple', 'lemon', 'banana'], info: { uname: 'lisi', age: 18 } }, methods: { }, }); // vm.$set(vm.list, 1, 'lemon'); // vm.$set(vm.list, 2, 'apple'); // vm.$info.gender = 'male'; vm.$set(vm.info, 'gender', 'female'); </script> </body>
原文地址:https://www.cnblogs.com/bky-/p/14061341.html
- 从老漏洞到新漏洞---iMessage 0day(CVE-2016-1843) 挖掘实录
- Wordpress <= 4.6.1 使用语言文件任意代码执行 漏洞分析
- 如何使用hadoop命令向CDH集群提交MapReduce作业
- Wordpress <= 4.6.1 使用主题文件触发存储型XSS 漏洞分析
- 如何跨平台在本地开发环境提交MapReduce作业到CDH集群
- 区块链行业的机会
- KEGG数据库的rest API(附带R语言小技巧)
- 如何使用Java代码访问HDFS.docx
- Django CSRF Bypass (CVE-2016-7401) 漏洞分析
- 如何使用Cloudera Manager禁用YARN的HA
- Web Worker 中的 importScripts 和 baseHref 同源策略绕过问题
- 如何使用Java代码访问CDH的Solr服务
- Safari UXSS漏洞分析(CVE-2016-4758)
- Sqoop抽取Hive Parquet表数据到MySQL异常分析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 细品redis的Scan和Keys命令
- if语句与while语句
- 内网渗透 | 基于IPC的横向移动
- 【DB笔试面试866】队列等待之enq: TX - allocate ITL entry
- 【Vue.js】Vue.js组件库Element中的上传、评分、穿梭框和表单
- 【Vue.js】Vue.js项目构建
- 【Vue.js】Vue.js组件库Element中的表格、标签和进度条
- 用个小技巧,趁你不备,rm -rf你的电脑
- 什么是Python 中的EAFP 哲学
- 设计模式--工厂模式
- 设计模式--命令模式
- 安装FastDFS+Nginx
- Redis 中的 5 大数据类型及其常用命令手册
- 设计模式--适配器模式
- 设计模式--外观模式