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组件,如果想细看代码或者使用的话,
vue底部选择器_Vue组件-极简的地址选择器相关推荐
- vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
- vue 底部footer导航组件
底部导航一定要用路径!!! 贼TM关键 举个例子: 你随便定义了一个变量, flag : 0 跳转首页, falg:1,跳转我的,底部导航的组件不可能全项目使用, 点击我的页面 这个时候flag 已经 ...
- vue变量传值_vue组件与组件之间传值
目录 一.父组件向子组件传值 二.子组件向父组件传值 三.兄弟组件之间的传值 如上图所示,2是1的子组件,1是3的父组件,2和3是兄弟组件 一.父组件向子组件传值: html代码: <div i ...
- easyexcel根据模板写入_用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员 灿若星空[1] 写作而成,欢迎加入图雀社区,一起创作精彩的免费技术教程,予力编程行业发展. 写在前面 此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目 ...
- 开发vue底部导航栏组件
这个想法源于最近自己在开发一个移动端博客的一个底部导航栏,原型设计如下: 我们来分析一下这个导航栏,其实很简单啦,就是自适应固定在底部 我们可以使用CSS3属性display:flex设置父级盒子为伸 ...
- element ui 前台模板_用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员https://blog.csdn.net/crxk_blog.csdn.net 写在前面 此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建 ...
- 用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员 灿若星空 写作而成,欢迎加入图雀社区,一起创作精彩的免费技术教程,予力编程行业发展. 写在前面 此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经 ...
- post json后台处理数据_用 Vue+ElementUI 搭建后台管理极简模板
写在前面 此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建好了一个后台管理系统的基础框架,教你如何在此基础上快速开发自己的后台管理系统,能让读者能在掌握一些基础 ...
- before vue路由钩子_vue组件级路由钩子函数介绍,及实际应用
正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子 你可以使用 rout ...
最新文章
- serch安装2012 windows_随身携带电脑系统 U盘系统工具WinToGo系统安装到U盘
- 自然语言处理之AI深度学习顶级实战
- c# rar解压大小_C#利用WinRAR实现压缩和解压缩
- php生成图片文件流,php如何将base64数据流文件转换为图片文件?
- 停机断网也能充话费了!微信和三大运营商打造绿色通道:太方便了!
- 各数据类型的取值范围及占用字节数。。
- 关于codeMirror插件使用的一个坑
- 写作技巧 - Markdown常用Emoji表情符号
- 8-思科防火墙:Cisco ASA uRPF运用
- Teamviewer Install
- Java基础-子类和父类之间的诡异事件
- 江苏省考计算机类包括哪些专业,2019年江苏省公务员考试计算机类包括哪些专业..._公务员考试_帮考网...
- java多线程厨师做饼,Java多线程之厨师与食客问题
- (区块链溯源)基于Hyperledger Fabric 区块链的危险化学品溯源
- spring源码bean生命周期篇 一 如何实例化对象
- ios手机怎么连接adb命令_ios手机怎么连接adb命令_Mac连接Adb
- jquery param 数组 带有 %5B%5D [] 问题
- 8684网站航班数据获取
- python获取文件夹下所有文件名
- Chrome主页被劫持
热门文章
- 【转】WPF XAML X名称空间详解
- 【转】注册Azure AD 2.0 应用程序
- 陀螺仪、罗经、IMU、MEMS四者的区别
- 第十一节:特性(常见的特性标签、自定义特性、特性的使用案例)
- [你必须知道的.NET] 第六回:深入浅出关键字---base和this
- as将安卓应用打包_Android Studio打包生成apk的方法(超级简单哦)
- CCNA-Cisco-Packet-Tracerchs(思科官网)安装教程以及使用
- 【HDU - 6441】Find Integer (费马大定理 + 奇偶数列法构造勾股定理)
- ACM中关于计算几何(浮点数)的精度问题
- LeetCode刷题实战(2):Add Two Numbers