时间:2021-05-26
一、前言
本文用Vue完成一个极简的地点选择器,我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说,我们先上demo图。因为每个人的需要不一样,我这边就不在实现更多的功能,所以留有更大的空间供大家增删改。
GitHub地址:Vue-location_Select
二、需要学习的地方
(1)数据更新Vue无法监控
首先要说一下的就是这个点,我们在Vue中有个好处就是可以不用操作dom,直接操作数据。但是这其实也有Vue无法监控的数据。如数组和对象。当然这里只是指一小部分操作而已,大部分操作都是没毛病的。接下来说说哪些数据操作Vue无法监控
1、数组
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
意思就是下面的情况都不能监控到,因此这样改变数组是不会刷新视图的
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也可以监控到的
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" //得到的就是值和数组下标//习惯性用法<div v-for="(val,index) in arr" :key="index"></div>2.遍历对象
v-for = "(val,key,index) in object" //得到的就是键值对还有下标//习惯性用法<div v-for = "(val,key,index) in object" :key="index"></div>CSS3样式
当然这里就不多说了。这个直接给出传送门:css3用scale实现下划线动画
实现极简地点选择
这里就放主要的代码吧,虽然总代码也不多
html部分
js
后话
到这里,我们就已经实现了该Vue组件,如果想细看代码或者使用的话,请点击Vue-location_Select,当然如果喜欢就不要吝啬你的star哦!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了VantUI框架实现时间段选择器的具体代码,供大家参考,具体内容如下组件代码如下:importVuefrom'vue'import{Fiel
由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于vue2.0的element-ui中的Cascader级联选择器的样式
【前言】无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上,vue中用scoped属性实现样式的私有化,利用深度作用选择器/d
【前言】无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上,vue中用scoped属性实现样式的私有化,利用深度作用选择器/d
本文实例讲述了微信小程序picker组件简单用法。分享给大家供大家参考,具体如下:picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器