}

.nickname_searched{

margin-left: 55rpx;

line-height: 100rpx;

}

.nickname_unsearched{

line-height: 100rpx;

margin: 0 auto;

text-align: center;

}

.fonticon_unsearched{

height: 0rpx;

width: 0rpx;

}

.icon-user-plus1,.icon-user,.icon-user-check{

line-height: 110rpx;

position: absolute;

right: 35rpx;

font-size: 40rpx;

}

上面的部分是用到了动态类名的css代码片段，可以和最初文章的第一部分展示的html代码进行对比，得到更加深刻的理解。

5️⃣效果优化

最后做一个简单的小的搜索功能优化：

要实现的效果：搜索结果在搜索框最后一个文字被擦除的瞬间完全消失。

首先，在html部分给input组件添加一个@input事件，这个事件会在input输入框的内容发生改变时被触发，同时会把此时的输入框内容作为事件的参数返回。

而后在JavaScript部分实现这个@input事件：

inputChanged(e){

if(e.target.value == “”){

this.searchName = “”,

this.imgSrc = “”,

this.currentFontIconClass = “fonticon_unsearched”

this.currentclass = “friend_unSearched”,

this.currentIconClass = “icon_unsearched”,

this.currentImgClass = “image_unsearched”,

this.currentNickClass = “nickname_unsearched”

}

}

其中inputChange()是给@input事件起的名字，这个名字可以任意起。需要注意的一点是，这里的 消失 仍然是用到了 动态类名 的方法。

最后的最后补充一下，演示gif图上的用户信息栏最右侧的小人是用字体图标实现的，这部分可能单独做一个博客展示。

III.源码

添加好友

<input type=“text” placeholder=“请输入对方的昵称” v-model=“friendName” @input=“inputChanged”/>

<view class=“searchbtn” @click=“search”>

搜索

{{searchName}}

<span @click=“add” :class=“currentFontIconClass”>