vue搜索好友_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"

},

{