vue底部选择器_Vue组件-极简的地址选择器

一、前言

本文用Vue完成一个极简的地点选择器,我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说,我们先上demo图。因为每个人的需要不一样,我这边就不在实现更多的功能,所以留有更大的空间供大家增删改。

二、需要学习的地方

(1)数据更新Vue无法监控

首先要说一下的就是这个点,我们在Vue中有个好处就是可以不用操作dom,直接操作数据。但是这其实也有Vue无法监控的数据。如数组和对象。当然这里只是指一小部分操作而已,大部分操作都是没毛病的。接下来说说哪些数据操作Vue无法监控

1、数组

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

当你修改数组的长度时,例如:vm.items.length = newLength

意思就是下面的情况都不能监控到,因此这样改变数组是不会刷新视图的

var vm = new Vue({

data: {

items: ['a', 'b', 'c']

}

})

vm.items[1] = 'x' // 不是响应性的,

vm.items.length = 2 // 不是响应性的

实际上要解决这两者的方法也简单:

//解决第一类问题

vm.$set(vm.items, indexOfItem, newValue)

//为了解决第二类问题,你可以使用 splice:

vm.items.splice(newLength)

这样就可以使得Vue监控到数组操作的变化。当然还有以下的操作Vue也可以监控到的

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

2.对象

由于 JavaScript 的限制,Vue不能检测对象属性的添加或删除! 这个是重点,如果动态的添加对象属性的话,那么请注意你添加对象属性的方式是否为$set,不然的话视图很有可能不更新。

var vm = new Vue({

data: {

userProfile: {

name: 'Anika'

}

}

})

vm.userProfile.age = 27; //看着没问题,实际上Vue无法监控

因此解决办法也是老办法,用

vm.$set(vm.userProfile, 'age', 27);

使用Object.assign()添加多个属性也要注意一下用法

//错误

Object.assign(vm.userProfile, {

age: 27,

favoriteColor: 'Vue Green'

})

//正确

vm.userProfile = Object.assign({}, vm.userProfile, {

age: 27,

favoriteColor: 'Vue Green'

})

(2)V-for的用法

1.遍历数组

这里直接撸码,一看就懂

v-for = "(val,index) in arr"

//得到的就是值和数组下标

//习惯性用法

2.遍历对象

v-for = "(val,key,index) in object"

//得到的就是键值对还有下标

//习惯性用法

CSS3样式

当然这里就不多说了。这个直接给出传送门:

实现极简地点选择

这里就放主要的代码吧,虽然总代码也不多

html部分

  • {{key}}

{{value}}

{{val}}

js

methods:{

getData(){

let xhr = new XMLHttpRequest(); //原生ajax

xhr.open('get','http://127.0.0.1:3001/read'); //请求mock

xhr.send();

xhr.onreadystatechange = ()=> {

if (xhr.readyState === 4 && xhr.status === 200) {

let locationN = JSON.parse(xhr.responseText); //获取数据,地点json

for (let key of Object.keys(locationN)) { //遍历取出数据,取得键值

for(let key2 of Object.keys(this.locationName)){ //遍历data中locationName,为了分类

let pattern = new RegExp("["+key2.toString()+"]");

if(pattern.test(key)){ //正则匹配,如果找到就进入对应的分类对象中

//判断该类中是否存在该字母这地名集合,如A,B,C

if (Array.isArray(this.locationName[key2][key.charAt(0)])) {

//如果存在则直接推入地名

this.locationName[key2][key.charAt(0)].push(locationN[key]);

//没有则先创建再推入地名

} else {

this.$set(this.locationName[key2],key.charAt(0),[]);

this.locationName[key2][key.charAt(0)].push(locationN[key]);

}

break;

}

}

}

}

}

},

}

后话

到这里,我们就已经实现了该Vue组件,如果想细看代码或者使用的话,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/445943.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FFmpeg源代码简单分析-编码-avcodec_encode_video()已被send_frame 和 receive_packet替代

参考链接 FFmpeg源代码简单分析:avcodec_encode_video()_雷霄骅的博客-CSDN博客_avcodec_encode_video2 avcodec_encode_video() 该函数用于编码一帧视频数据。函数已被弃用参考链接:FFmpeg 新旧版本编码 API 的区别_zouzhiheng的博客-CSDN博客 send_f…

《深入理解JVM.2nd》笔记(三):垃圾收集器与垃圾回收策略

文章目录概述对象已死吗引用计数算法可达性分析算法再谈引用finalize():生存还是死亡回收方法区垃圾收集算法标记-清除算法复制算法标记-整理算法分代收集算法HotSpot的算法实现枚举根结点安全点安全区域垃圾收集器SerialParNewParallel ScavengeSerial OldParallel…

python计算股票趋势_通过机器学习的线性回归算法预测股票走势(用Python实现)...

1 波士顿房价数据分析安装好Python的Sklearn库后,在安装包下的路径中就能看到描述波士顿房价的csv文件,具体路径是“python安装路径\Lib\site-packages\sklearn\datasets\data”,在这个目录中还包含了Sklearn库会用到的其他数据文件&#xff…

FFmpeg源代码简单分析-编码-av_write_frame()

参考链接 FFmpeg源代码简单分析:av_write_frame()_雷霄骅的博客-CSDN博客_av_write_frame av_write_frame() av_write_frame()用于输出一帧视音频数据,它的声明位于libavformat\avformat.h,如下所示。 /*** Write a packet to an output me…

《深入理解JVM.2nd》笔记(四):虚拟机性能监控与故障处理工具

文章目录概述JDK的命令行工具jps:虚拟机进程状况工具jstat:虚拟机统计信息监视工具jinfo:Java配置信息工具jmap:Java内存映像工具jhat:虚拟机堆转储快照分析工具jstack:Java堆栈跟踪工具HSDIS:J…

postgresql 主从配置_Postgresql主从配置

一、简介PostgreSql在9.0之后引入了主从的流复制机制,所谓流复制,就是从服务器通过tcp流从主服务器中同步相应的数据。这样当主服务器数据丢失时从服务器中仍有备份。与基于文件日志传送相比,流复制允许保持从服务器更新。 从服务器连接主服务…

FFmpeg源代码简单分析-编码-av_write_trailer()

参考链接: FFmpeg源代码简单分析:av_write_trailer()_雷霄骅的博客-CSDN博客_av_malloc av_write_trailer() av_write_trailer()用于输出文件尾,它的声明位于libavformat\avformat.h,如下所示 /*** Write the stream trailer to…

科沃斯扫地机器人风扇模块_扫地机器人不能开机,不能关机,风扇不转

家庭的重要性自不必再细说,而小编今天要说的则是家庭环境的重要性。一般家庭最少居住三口人,两个大人加一个孩子,每天回到家,看到家里整洁舒适的环境,心情该是多么地惬意。要是我们每天下班回到家中,看到满…

MySQL关键字EXPLAIN的用法及其案例

文章目录概述EXPLAIN输出的列的解释实例说明select_type的说明UNIONDEPENDENT UNION与DEPENDENT SUBQUERYSUBQUERYDERIVEDtype的说明system,consteq_refrefref_or_nullindex_mergeunique_subqueryindex_subqueryrangeindexALLextra的说明DistinctNot existsRange ch…

FFmpeg源代码简单分析-其他-日志输出系统(av_log()等)

参考链接 FFmpeg源代码简单分析:日志输出系统(av_log()等)_雷霄骅的博客-CSDN博客_ffmpeg源码分析 日志输出系统(av_log()等) 本文分析一下FFmpeg的日志(Log)输出系统的源代码。日志输出部分的…

FFmpeg源代码简单分析-其他-AVClass和AVoption

参考链接 FFmpeg源代码简单分析:结构体成员管理系统-AVClass_雷霄骅的博客-CSDN博客FFmpeg源代码简单分析:结构体成员管理系统-AVOption_雷霄骅的博客-CSDN博客 概述 AVOption用于在FFmpeg中描述结构体中的成员变量。它最主要的作用可以概括为两个字&a…

oracle手工收集awr报告_oracle手工生成AWR报告方法记录-阿里云开发者社区

AWR(Automatic Workload Repository)报告是我们进行日常数据库性能评定、问题SQL发现的重要手段。熟练掌握AWR报告,是做好开发、运维DBA工作的重要基本功。AWR报告的原理是基于Oracle数据库的定时镜像功能。默认情况下,Oracle数据库后台进程会以一定间隔…

IntelliJ IDEA 默认快捷键大全

文章目录Remember these ShortcutsGeneralDebuggingSearch / ReplaceEditingRefactoringNavigationCompile and RunUsage SearchVCS / Local HistoryLive Templates参考资料Remember these Shortcuts 常用功能快捷键备注●Smart code completionCtrl Shift Space-●Search e…

python爬虫的数据如何解决乱码_写爬虫时如何解决网页乱码问题

实战讲解,文章较长,对爬虫比较熟悉的浏览翻看章节 2.3 获取新闻文本内容。写爬虫时经常对网址发起请求,结果返回的html数据除了标签能看懂,其他的全部是乱码。大家如果对爬虫感兴趣,请耐心阅读本文,我们就以…

FFmpeg源代码简单分析-其他-libswscale的sws_getContext()

参考链接 FFmpeg源代码简单分析:libswscale的sws_getContext()_雷霄骅的博客-CSDN博客 libswscale的sws_getContext() FFmpeg中类库libswsscale用于图像处理(缩放,YUV/RGB格式转换)libswscale是一个主要用于处理图片像素数据的类…

IntelliJ IDEA 学习笔记

IDEA教学视频 文章目录1.IntelliJ IDEA的介绍和优势IDEA 的主要优势2.版本介绍与安装前的准备3.IDEA的卸载4.IDEA的安装5.安装目录和设置目录结构的说明安装目录设置目录6.启动IDEA并执行HelloWorld7.Module的使用8.IDEA的常用设置9.快捷键的设置10.常用的快捷键的使用111.常用…

机器学习顶刊文献_人工智能顶刊TPAMI2019最新《多模态机器学习综述》

原标题:人工智能顶刊TPAMI2019最新《多模态机器学习综述》来源:专知摘要:”当研究问题或数据集包括多个这样的模态时,其特征在于多模态。【导读】人工智能领域最顶级国际期刊IEEE Transactions on Pattern Analysis and Machine I…

Windows上同时运行两个Tomcat

步骤 1.获得免安装包 从Tomcat官网下载免安装包。 2.解压复制 解压并创建两个副本tomcat1和tomcat2,它们的路径分别为: tomcat1:C:\tomcat\double\apache-tomcat-7.0.90-8081tomcat2:C:\tomcat\double\apache-tomcat-7.0.90-…

FFmpeg源代码简单分析-其他-libswscale的sws_scale()

参考链接 FFmpeg源代码简单分析:libswscale的sws_scale()_雷霄骅的博客-CSDN博客_bad dst image pointers libswscale的sws_scale() FFmpeg的图像处理(缩放,YUV/RGB格式转换)类库libswsscale中的sws_scale()函数。libswscale是一…

布朗桥python_MATLAB 里面有哪些加快程序运行速度的方法呢,求分享?

挖坟了…睡不着觉当个备忘录记一下用过的方法吧1. 循环向量化2. 利用函数的矩阵输入功能批量处理3. 必须用for且费时的地方改成单层parfor,要是循环次数比cpu核数还少反而会拖慢程序4. 非常大的矩阵的运算可以用gpuArray(这个在matlab 深度学习工具箱中深有体会)5. …