vue搜索好友

admin管理员组

文章数量:1516870

vue搜索好友

逛过vue官网肯定会发现一个有趣的指令“v-for”，相比与以前拼接html代码确实要上档次一点，而且减少了工作量，先看一波效果图

首先用以前的思路分析一波，每个联系人头像，昵称肯定是不同的，不管你用ajax还是什么，获取到你要的数据，一个数组，然后一个循环将我们需要的数据取出来，拼接好html，一个$("...").html(...)就完事了，简单的样式肯定还是比较好拼的，如果说很复杂的话那就会重复写很多遍，而且很容易写错，尤其是使用bootstrap，你会发现他的样式由很多div嵌套起来的，那就比较伤脑筋了。

那我们可以使用“v-for”来搞一波//页面...这里我就只放关键的代码

•              

  {{item .name}}

var vm=new Vue({

el:"#app",//绑定对象，相当于作用范围

data:function(){

return{

friends:[{

id: 1,

name: "Aster",

headImg: "src/assets/img/uimg/u__chat-img09.jpg"

},

{

id: 2,

name: "Bear",

headImg: "src/assets/img/uimg/u__chat-img10.jpg"

},...]

}

}

})

语法什么的我就不过多介绍了，文档里写的很清楚

这里初步的效果就有了，我们接下来分许一下，当我点击某个好友的时候，会有选中效果，首先想到的肯定是一个点击事件，然后添加样式而已，确实，并不难。用jQuery来做的话就是add Class之类的操作，但是会有些繁琐，我需要找到我点击的是哪一个好友，然后兄弟节点样式删除等操作，使用vue就会简单很多，上代码：

//这里使用@@，因为在mvc中一个@代表后台代码

//注意这里 unCTX on=>是选中的样式,vue支持两个class

{{item .name}}

var vm=new Vue({

el:"#app",//绑定对象，相当于作用范围

data:function(){

return{

friends:[{

id: 1,

name: "Aster",

headImg: "src/assets/img/uimg/u__chat-img09.jpg"

},

{

id: 2,

name: "Bear",

headImg: "src/assets/img/uimg/u__chat-img10.jpg"

},...],

selectionId:undefined

}

},

methods:{

routeSkip(id){

this.selectionId=id;

//...根据好友Id进行其他操作

}

}

})

这里选中效果就有了，是不是很简单，至于为什么要用好友Id，这是因为后面还有其他操作，用自带的index的话满足不了我的需求，这里随便说一下怎么使用index，

在v-for的循环中其实还可以写成这样v-for="(item,index) in friends"，item代表这个对象，index代表下标，我们可以使用下标来添加选中样式，就不需要定义selectionId了，当点击的时候比如做什么跳转啊之类的就可以在routeSkip方法中操作了

学习很重要，尤其是现在是大前端时代，不说精通，但是能看懂一下也还是很有必要的，文档是个好东西，善于利用文档。

写的比较糙，有不懂的在下方留言，尽我所能为你解答

本文标签： vue搜索好友