<template><div class="hello"><el-input v-model="title" placeholder="請輸入內容"></el-input><ul><li v-for="item in result">標題： {{item.item.title}}<br />作者： {{item.item.author.firstName}}<br />分數： {{item.score}}</li></ul></div> </template><script> // 1. 引入Fuse import Fuse from "fuse.js"; export default {data() {return {title: "",fuse: null,result: [],books: [{title: "Java虛擬機",author: {firstName: "王浩",lastName: "wanghao"}},{title: "人工智能",author: {firstName: "侯建軍",lastName: "marquis"}}]};},created() {// 2. 初始化this.init();},watch: {// 要變量名一致title(newName, oldName) {// 新值console.log(newName);// 舊值console.log(oldName);// 3. 搜索內容this.result = this.fuse.search(newName);console.log(this.result);}},methods: {// 初始化init() {var options = {shouldSort: true, // 是否按分數對結果列表排序includeScore: true, // 是否應將分數包含在結果集中。0分表示完全匹配，1分表示完全不匹配。threshold: 0.6, // 匹配算法閾值。閾值為0.0需要完全匹配（字母和位置），閾值為1.0將匹配任何內容。/*** 確定匹配與模糊位置（由位置指定）的距離。一個精確的字母匹配，即距離模糊位置很遠的字符將被視為完全不匹配。* 距離為0要求匹配位于指定的準確位置，距離為1000則要求完全匹配位于使用閾值0.8找到的位置的800個字符以內。*/location: 0, // 確定文本中預期找到的模式的大致位置。distance: 100,maxPatternLength: 32, // 模式的最大長度minMatchCharLength: 1, // 模式的最小字符長度// 搜索標題與作者名keys: ["title", "author.firstName"]};// 設置數據與參數this.fuse = new Fuse(this.books, options);}} }; </script>

總結

以上是生活随笔為你收集整理的(精华)2020年7月16日 vue Fuse.js模糊搜索引擎的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。