大佬教程收集整理的这篇文章主要介绍了Vue组件之极简的地址选择器的实现,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
本文用Vue完成一个极简的地点选择器,我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说,我们先上demo图。因为每个人的需要不一样,我这边就不在实现更多的功能,所以留有更大的空间供大家增删改。
GitHub地址:Vue-location_Select
首先要说一下的就是这个点,我们在Vue中有个好处就是可以不用操作dom,直接操作数据。但是这其实也有Vue无法监控的数据。如数组和对象。当然这里只是指一小部分操作而已,大部分操作都是没毛病的。接下来说说哪些数据操作Vue无法监控
1、数组
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
意思就是下面的情况都不能监控到,因此这样改变数组是不会刷新视图的
实际上要解决这两者的方法也简单:
这样就可以使得Vue监控到数组操作的变化。当然还有以下的操作Vue也可以监控到的
2.对象
由于 JavaScript 的限制,Vue不能检测对象属性的添加或删除! 这个是重点,如果动态的添加对象属性的话,那么请注意你添加对象属性的方式是否为$set,不然的话视图很有可能不更新。
因此解决办法也是老办法,用vm.$set(vm.userProfile,'age',27);
使用Object.assign()
添加多个属性也要注意一下用法
//正确
vm.userProfile = Object.assign({},vm.userProfile,favoriteColor: 'Vue Green'
})
1.遍历数组
这里直接撸码,一看就懂
//习惯性用法
<div v-for="(val,indeX) in arr" :key="index">
2.遍历对象
这里就放主要的代码吧,虽然总代码也不多
html部分
js
//判断该类中是否存在该字母这地名集合,如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-location_Select,当然如果喜欢就不要吝啬你的star哦!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程。
以上是大佬教程为你收集整理的Vue组件之极简的地址选择器的实现全部内容,希望文章能够帮你解决Vue组件之极简的地址选择器的实现所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。