Vue實現文本模糊匹配功能的方法-創新互聯
這篇文章主要講解了Vue實現文本模糊匹配功能的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
模糊匹配功能在下拉菜單的組件中用的非常多，于是打算寫幾個demo看看細節上是如何實現的。
一、最簡單的模糊匹配：計算屬性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<ul>
<li v-for="(option, index) in matchedOptions" :key="index">{{ option }}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '',
options: ['html', 'css', 'javascript']
},
computed: {
matchedOptions() {
if (this.message !== '') {
return this.options.filter(option => option.includes(this.message))
}
return this.options
}
}
})
</script>
</body>
</html>
網頁名稱：Vue實現文本模糊匹配功能的方法-創新互聯
文章分享：http://www.js-pz168.com/article12/disdgc.html
成都網站建設公司_創新互聯，為您提供網站改版、靜態網站、做網站、手機網站建設、外貿建站、自適應網站
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 品牌網站制作之搜索引擎營銷 2021-11-17
- 品牌網站制作有哪些重要注意事項？ 2016-08-20
- 為什么高端品牌網站制作公司越來越少了 2016-11-12
- 品牌網站制作怎么建設更高效 2021-08-27
- 品牌網站制作好后網站URL優化有技巧 2022-08-12
- 品牌網站制作好方法好步驟？ 2021-06-03
- 周口品牌網站建設：在品牌網站制作的過程中有哪些值得注意的問題？ 2021-09-10
- 什么是品牌網站，品牌網站制作需要注意哪些內容？ 2016-10-15
- 高端品牌網站制作離不開獨特新穎的設計 2016-10-30
- 品牌網站制作解決方案 2016-09-12
- 如何做好品牌網站制作 2021-11-16
- 品牌網站制作常見的布局方式！ 2022-05-11