神刀安全网

Vue组件-极简的地址选择器

一、前言

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

Vue组件-极简的地址选择器

demo5.gif

GitHub地址Vue-location_Select

二、需要学习的地方

(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"  //得到的就是值和数组下标  //习惯性用法 <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部分
<div class="siteBox" id="siteBox"  v-if="isShow">     <header>         <ul class="classify">             <li :class="{active:isClassify===key}" v-for="(arr,key,index) in this.locationName" :key="index" @click="isClassify=key">                 <a class="classify-a" href="#">{{key}}</a>             </li>         </ul>     </header>     <main class="site-name">         <dl v-for="value of isClassify">             <dt>{{value}}</dt>             <div class="list-dd">                 <dd v-for="(val,index) in locationName[isClassify][value]" :key="index" @click="site=val;isShow=false">                     <a class="list-a" href="#">{{val}}</a>                 </dd>             </div>         </dl>     </main> </div> 
  • 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-location_Select,当然如果喜欢就不要吝啬你的star哦!

原创文章,转载需注明出处

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Vue组件-极简的地址选择器

分享到:更多 ()