vue实战中的一些技巧《一》-阿里云开发者社区

开发者社区> 小周sir> 正文

vue实战中的一些技巧《一》

简介: vue实战中的一些技巧《一》
+关注继续查看

大部分公司几乎现在都用到了vue,一个简易,灵活,高效的一个框架,方便快速开发项目。

  • 在工作中,我们经常会遇到查询一条数据,但是我们如果模糊查询的时候,在查询的数据中,怎么高亮的显示我们查询的内容。

从后台遍历的数据中

this.listQuery就是我们在data定义的字段名,用户input绑定model,listBook请求的数据,这里是对titleauthor两个字段查询

listBook(this.listQuery).then(response => {
        const list = response.data.list
        this.list = list
        this.listLoading = false
        // 遍历数据,查询title和author
        this.list.forEach(book => {
          book.titleWrapper = this.wrapperKeyword('title', book.title)
          book.authorWrapper = this.wrapperKeyword('author', book.author)
        })
      })

定义一个wrapperKeyword方法

其中k和v就是我们模糊查询的字段名称,highlight返回查询到字段需要渲染的标志。
其中if条件判断是不是包含这个字段,如果有的话,通过正则直接返回,在正则中,已经i过滤大小写,g全局匹配

wrapperKeyword (k, v) {
      function highlight (value) {
        return `<span style="color:#1890ff">${value}</span>`
      }
      if (!this.listQuery[k]) {
        return v
      } else {
        //   正则表达式 i大小写g全局
        return v.replace(new RegExp(this.listQuery[k], 'ig'), v => highlight(v))
      }
    },

在标签中,通过定义titleWrapperauthorWrapper动态绑定上去

<el-table-column label="ID"
                       prop="id"
                       sortable="custom"
                       align="center"
                       width="80" />
      <el-table-column label="书名"
                       width="150"
                       align="center">
        <template slot-scope="{row:{titleWrapper}}">
          <span >{{titleWrapper}}</span>
        </template>
      </el-table-column>
      <el-table-column label="作者"
                       width="150"
                       align="center">
        <template slot-scope="{row:{authorWrapper}}">
          <span >{{authorWrapper}}</span>
        </template>
      </el-table-column>

这样写的话,在页面中会出现一个问题
在这里插入图片描述
渲染的时候,会出现一个问题,就是把标签也渲染上去了,这个时候,就需要vue提供的v-html来去渲染了
在这里插入图片描述
这样就达到我们需求了,可以明确标出我们查询的那个名字

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SAP成都研究院李三郎:SCP Application Router简介
SAP成都研究院李三郎:SCP Application Router简介
5 0
一个用JavaScript生成思维导图(mindmap)的github repo
一个用JavaScript生成思维导图(mindmap)的github repo
5 0
分类模块之查询所有分类 | 学习笔记
快速学习分类模块之查询所有分类。
6 0
Java高级软件工程师面试考纲
  如果要应聘高级开发工程师职务,仅仅懂得Java的基础知识是远远不够的,还必须懂得常用数据结构、算法、网络、操作系统等知识。因此本文不会讲解具体的技术,笔者综合自己应聘各大公司的经历,整理了一份大公司对Java高级开发工程师职位的考核纲要,希望可以帮助到需要的人。   当前,市面上有《Java XX宝典》类似的图书,而且图书中的内容都着重在讲解Java最为基础的部分,最严重的是,里面有着大量错误的内容,极具误导性。另外,网上也有各种各样的Java面试题,很多也是着重在Java语言基础上。实际上,如果要应聘高级开发工程师职务,仅仅懂得Java的基础知识是远远不
8 0
使用HANA Web-based Development Workbench创建最简单的Server Side JavaScript
使用HANA Web-based Development Workbench创建最简单的Server Side JavaScript
4 0
高校学生在家实践ECS弹性云服务器
简单谈谈我这几周使用ECS弹性云服务器的体验感
4 0
如何在SAP Server Side JavaScript里消费destination
如何在SAP Server Side JavaScript里消费destination
4 0
高校学生在家实践ECS弹性云服务器
简单谈谈我这几周使用ECS弹性云服务器的体验感
4 0
CDA LEVEL I 数据分析认证考试模拟题库(十一)
  嗨喽,各位同学又到了公布CDA数据分析师认证考试LEVEL I的模拟试题时间了,今天给大家带来的是模拟试题(一)中的51-55题。   不过,在出题前,要公布下上一期46-50题的答案,大家一起来看!   46、B   47、A   48、C   49、D   50、D   你答对了吗?
7 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
51
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载