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,

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

{

id: 2,

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

},...]

}

})

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

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

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

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

var vm=new Vue({

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

data:function(){

return{

friends:[{

id: 1,

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

{

id: 2,

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搜索好友_vue实现好友选中效果相关推荐

vue 下拉框筛选列表_vue下拉菜单选择输入框_带有下拉菜单的Vue搜索输入可提供更多过滤条件...
vue下拉菜单选择输入框 @ tillhub / vue-search-filter (@tillhub/vue-search-filter) Vue search input with dropdo ...
字符串根据字节长度进行截取并展示选中效果——js字符串获取字节长度
应用场景:分类部分有很多子类,点击"分类"时,有选中状态,选中效果如下: 由于内容分类名称可能会很长,就需要进行-展示, 模拟页面大致排版, 效果图如下: 可以看到上图中当分类名称 ...
Java导出带有单选款（radio）和复选框(checkbox)选中效果的word doc文档-Freemarker实现方式
今天客户提出要求,要求把表数据导出成为word文档格式.导成word格式的这种需求很寻常,但是看到word模板里面的这种单选框和多选框(如下图),要求实现选中效果,我就有点懵B了.到处百度,googl ...
html增删改后让table自动刷新,vue如何实现表格增删改查效果
vue如何实现表格增删改查效果发布时间:2021-04-23 14:34:54 来源:亿速云阅读:90 作者:小新小编给大家分享一下vue如何实现表格增删改查效果,相信大部分人都还不怎么了解,因 ...
qq好友克隆-转好友
如果您不是QQ会员: 从一个QQ中把好友克隆到另一个QQ中去,就本来是QQ会员才有的权利,但是你通过下面的方法一样也能完成的,你试试吧: 普通QQ号照样可以克隆QQ好友相信大家手头都有几个备用的QQ ...
vue 日期面板_Vue实战：日期选择器
在日常工作中需要填写日期的时候,会用到日期选择器,来方便的进行日.月.年的选择.这里我们会用Vue来实现一个日期选择器,效果如下: 实现功能:日期选择弹出层选择天面板选择月面版选择年面版支持用 ...
mysql有3个共同好友_共同好友mysql
1. 好友关系传统:uid. friendId 缺陷:对于海量数据,100w用户,每人50个好友,则有 100w * 50的数据,数据量颇大改进1:分表根据uid hash成多个数据表,这样保障 ...
Vue 教程第九篇—— 动画和过度效果
过渡效果 SPA 中组件的切换有一种生硬的隐藏显示感觉,为了更好的用户体验,让组件切换时淡出淡入,Vue 提供了专门的组件 transition. 过滤效果应用场景条件渲染 (使用 v-if) 条件 ...
android 飞框动画,AndroidTV中实现飞框选中效果
相信很多从事AndroidTV开发的朋友都对如何展示item的选中效果感到苦恼,电视端开发与移动端最大的不同是用户只能通过一个遥控器进行控制(当然如果你的电视是触屏的话除外--),在这个时候,我们需要 ...

vue搜索好友_vue实现好友选中效果

vue搜索好友_vue实现好友选中效果相关推荐

最新文章

热门文章