脚本宝典收集整理的这篇文章主要介绍了

VUE-搜索过滤器

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h3 id="articleHeader0">VUE非常实用的搜索过滤,喜欢点个赞哦</h3> <p>废话不多说,先来看看效果</p> <p><span class="img-wrap"><img data-src="/img/bV4NPw?w=204&amp;h=252" src="/img/bV4NPw?w=204&amp;h=252" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <h3 id="articleHeader1">1 引入vue</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;https://cdn.jsdelivr.net/npm/vue&quot;></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <h3 id="articleHeader2">2 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a></h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <input v-model='search' /></p> <ul v-if=&quot;searchData.length > 0&quot;></p> <li v-for=&quot;item in searchData&quot;>{{item.name}},价格:¥{{item.price}}</li> </ul> <div v-else>暂无数据</div> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">'search'</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"searchData.length &gt; 0"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in searchData"</span>&gt;</span>{{item.name}},价格:¥{{item.price}}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-else</span>&gt;</span>暂无数据<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <h3 id="articleHeader3">3 JS</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var vm = new Vue({ el: '#app', data: { search: '', products: [{ name: '苹果', price: 25, category: &quot;水果&quot; }, { name: '香蕉', price: 15, category: &quot;水果&quot; }, { name: '雪梨', price: 65, category: &quot;水果&quot; }, { name: '宝马', price: 2500, category: &quot;汽车&quot; }, { name: '奔驰', price: 10025, category: &quot;汽车&quot; }, { name: '柑橘', price: 15, category: &quot;水果&quot; }, { name: '奥迪', price: 25, category: &quot;汽车&quot; }] }, computed: { searchData: function() { var search = this.search; if (search) { return this.products.filter(function(product) { return Object.keys(product).some(function(key) { return String(product[key]).toLowerCase().indexOf(search) > -1<br /> })<br /> })<br /> }</p> <p> return this.products;<br /> }<br /> }<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>, <span class="hljs-attr">data</span>: { <span class="hljs-attr">search</span>: <span class="hljs-string">''</span>, <span class="hljs-attr">products</span>: [{ <span class="hljs-attr">name</span>: <span class="hljs-string">'苹果'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">25</span>, <span class="hljs-attr">category</span>: <span class="hljs-string">"水果"</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'香蕉'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">15</span>, <span class="hljs-attr">category</span>: <span class="hljs-string">"水果"</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'雪梨'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">65</span>, <span class="hljs-attr">category</span>: <span class="hljs-string">"水果"</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'宝马'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">2500</span>, <span class="hljs-attr">category</span>: <span class="hljs-string">"汽车"</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'奔驰'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">10025</span>, <span class="hljs-attr">category</span>: <span class="hljs-string">"汽车"</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'柑橘'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">15</span>, <span class="hljs-attr">category</span>: <span class="hljs-string">"水果"</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'奥迪'</span>, <span class="hljs-attr">price</span>: <span class="hljs-number">25</span>, <span class="hljs-attr">category</span>: <span class="hljs-string">"汽车"</span> }] }, <span class="hljs-attr">computed</span>: { <span class="hljs-attr">searchData</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> search = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.search; <span class="hljs-keyword">if</span> (search) { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.products.filter(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">product</span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.keys(product).some(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">key</span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">String</span>(product[key]).toLowerCase().indexOf(search) &gt; <span class="hljs-number">-1</span> }) }) } <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.products; } } })</code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

VUE-搜索过滤器

全部内容,希望文章能够帮你解决

VUE-搜索过滤器

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过