直播开发app，实时搜索、搜索引擎框

直播开发app，实时搜索、搜索引擎框实现的相关代码

1.view部分

 

1

<br><template><br><view class="content"><br><!-- 代码 start --><br><view class="invitation-zhiwei-search"><br><label class="cuIcon-search"></label><br><input type="text" v-model="filterText" placeholder="请输入职位名称" /><br></view><br><view class="invitation-zhiwei-ul"><br><text v-for="(item,index) in filterList" :key="index" @click="zwcok(index)">{{item.name}}</text><br></view><br><!-- 代码  end --><br></view><br></template>

​

2.js部分

 

1

<br><script><br>export default {<br>data() {<br>return {<br>filterText: '',<br>zhiweilist: [{<br>id: 0,name: '全部'<br>},<br>{<br>id: 1,name: '地铁安检'<br>},<br>{<br>id: 2,name: '家政保洁'<br>},<br>{<br>id: 3,name: '电话销售'<br>},<br>{<br>id: 4,name: 'php后端开发'<br>}<br>],<br>}<br>},<br>onLoad() {},<br>computed: {<br>filterList() {<br>var arr = []<br>this.zhiweilist.forEach((item) => arr.push(item))<br>if (this.filterText) {<br>arr = this.zhiweilist.filter(item => item.name.includes(this.filterText))<br>}<br>return arr<br>}<br>},<br>methods: {<br>}<br>}<br></script>

 

3.css部分

 

1

<br><style><br>page {<br>background: #f3f4f6;<br>}<br>.invitation-zhiwei-ul text {<br>width: 100%;<br>height: 90rpx;<br>line-height: 90rpx;<br>display: block;<br>border-bottom: 1px #eaeaea solid;<br>box-sizing: border-box;<br>padding: 0px 3%;<br>color: #666;<br>font-size: 14px;<br>}<br>.invitation-zhiwei-search {<br>width: 100%;<br>height: 80rpx;<br>line-height: 80rpx;<br>background: rgba(0, 0, 0, .1);<br>display: flex;<br>flex-direction: row;<br>box-sizing: border-box;<br>padding: 0px 3%;<br>align-items: center;<br>justify-content: space-between;<br>}<br>.invitation-zhiwei-search input {<br>font-size: 14px;<br>width: 90%;<br>}<br>.invitation-zhiwei-search label {<br>font-size: 18px;<br>}<br></style>

 

以上就是直播开发app，实时搜索、搜索引擎框实现的相关代码， 更多内容欢迎关注之后的文章