2021SC@SDUSC 软件工程应用与实践（9）——过滤器filter

最新推荐文章于 2024-10-01 18:51:18 发布

LiuFangdi145

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量133

点赞数

分类专栏： 2021SC@SDUSC 文章标签： java

本文链接：https://blog.csdn.net/Fancy145/article/details/121581502

版权

2021SC@SDUSC 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文主要分析了2021SC@SDUSC项目中的搜索功能实现，并深入探讨了Vue.js的过滤器filter，包括全局过滤器的定义和使用。全局过滤器通过Vue.filter方法注册，常用于数据格式化，例如时间日期处理。在实际开发中，这些处理函数通常会单独抽取到.js文件中，以便于管理和复用。

摘要由CSDN通过智能技术生成

2021SC@SDUSC

一、引言

本篇博客我将对项目中的相关搜索功能的实现进行分析。

二、代码分析

1.搜索功能的实现

<template>
  <div class="table">
    <div class="search-Box">
      <el-input   placeholder="请输入关键字" icon="search"  class="search"  v-model="search"></el-input>
    </div>
    <el-table  :data="tables" border style="width: 100%">
      <el-table-column  prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column   prop="address"  label="地址"></el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        search: '',  //搜索
        tableData: [
          { date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
          {date: '2016-05-04',name: '章小虎',address: '上海市普陀区金沙江路 1517 弄'},
          {date: '2016-05-01',name: '李小虎',address: '上海市普陀区金沙江路 1519 弄'},
        ]  //表格内容
      }
    },
    computed:{
      tables:function(){
        var search=this.search;
        if(search){
          return  this.tableData.filter(function(dataNews){
            return Object.keys(dataNews).some(function(key){
              return String(dataNews[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.tableData
      }
    }
  }
</script>

<template>
  <div class="note" :style ="note">
  <div>
    <el-container>
      <el-header style="width = 100%;padding: 0px;display:flex;justify-content:space-between;align-items: center">
        <div style="display: inline " >
          <el-input
            placeholder="输入你想要问的问题,记得回车哦..."
            clearable
            @change="keywordsChange"
            style="width: 500px;margin: 0px;padding: 0px;"
            size="mini"
            :disabled="advanceSearchViewVisible"
            @keyup.enter.native="loadEmps"
            prefix-icon="el-icon-search"
            v-model="keywords">
          </el-input>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="loadEmps">搜索
          </el-button>
        </div> 
      </el-header>

      <br>
      <br>
      <div  style="width = 50%">
          <!-- <p style="width = 100%;padding: 0px;display:flex;justify-content:space-between;align-items: center">结果</p>
          <span style="width = 100%;padding: 0px;display:flex;justify-content:space-between;align-items: center">{{myData[0].name}}</span> -->
          <el-table :data="myData" border  style="text-align:left;width: 60%" >
            <el-table-column prop="name" label="结果"></el-table-column>
          </el-table>
      </div>
      
    </el-container>
    <el-container style="width :60%;text-align:left;display:flex;">
      <el-header style="padding:0">
        <p font-size="100px"><b>相似问题</b></p>
      </el-header>
      <el-main style="padding: 0px;">
          <el-collapse  v-model="activeNames" @change="handleChange">
            <el-collapse-item v-for="sentence in sentences" :key="sentence" v-bind:title="sentence.title" v-bind:name="sentence.name">
              <div><p v-html="sentence.sent"></p></div>
            </el-collapse-item>
          </el-collapse>
      </el-main>
    </el-container>
  </div> 
  </div>
</template>

<script>

export default {
    name: 'productdetailspage',
    data() {
        return {
            myData:[{name:"暂时没有结果"}],
            keywords: '',
            activeNames: ['1'],
            // sentences:[{title:"一致性 Consistency",sent:"与现实生活一：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；与现实生活一：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；与现实生活一：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；",name:"1"},
            //     {title:"反馈 Feedback",sent:"控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；",name:"2"},
            //     {title:"效率 Efficiency",sent:"简化流程：设计简洁直观的操作流程；",name:"3"},
            //     {title:"可控 Controllability",sent:"用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；",name:"4"},
            // ],
            sentences:[]
        }
    },
    methods: {
      loadEmps(){
        var _this = this;
        // alert("70");
        this.postRequest('/employee/basic/basicdata',{
          str: this.keywords
        }).then(resp=>{  
          this.myData = [];
              resp.data.forEach(element => {
                // alert(element);
                this.myData.push({"name":element});
              });
        }),
        this.postRequest('/employee/basic/getSimilarity',{
          str: this.keywords
        }).then(resp=>{  
          this.sentences = []
          var i = 1
          alert(resp.data)
          resp.data.forEach(element => {
          
          var temp = element.split("&");
          this.sentences.push({title:temp[0],sent:temp[1],name:i});
          i++;
        });  
        })
      },
      handleChange(val) {
        // alert(val);
      }
    }
}
</script>
<style>

</style>

2.过滤器filter的介绍及分析

Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器分全局过滤器和局部过滤器。

全局过滤器

全局过滤器使用：Vue.filter( filterName，( )=>{ return // 数据处理结果 } )

<div id="app">
    <h3>{{viewContent | addNamePrefix}}</h3>
</div>
<script>
    Vue.filter("addNamePrefix",(value)=>{
        return "my name is" + value
    })
 
    let vm = new Vue({
        el:"#app",
        data:{
            viewContent:"吕星辰" 
        }
    })
</script>

上述代码是全局过滤器，参数一是过滤器的名字，也就是管道符后边的处理函数；参数二：处理函数，处理函数的参数同上。
在实际开发中，全局过滤器经常会被在数据（比如时间、日期的装饰）上边，通常我们会把处理函数给抽离出去，统一放在一个.js文件中。
当我们引用vue框架时，vue会被自动添加到window全局对象上边，而Vue正是一个构造函数，里边定义的是一些静态方法和静态属性，我们知道在ES6类中有静态方法，只有类可以调用！这样也就不难理解了，filter全局过滤器可以被Vue所调用，因为它是一个静态方法。