其中还有一个bug没法解决，就是在点击之后才会对点击的元素添加上类，这个与我要实现的点击的同时会添加类这个有所冲突，知道的希望大家在后面踊跃留言
2、搜索引擎模拟
搜索引擎模拟这里所得有点大了，事实上真正的搜索是不可能通过前端就实现的，这个大家都知道因为很多东西都要用后端去抓取，但是小编是在一个小城市工作的，所以也见过一些制作得比较差的，APP商业项目，举个例子来说，就像你使用百度外卖的手动获取地理位置的时候，你如果输入一部分相关的内容之后会自动筛选相应的内容列出来，这个的详细的用法可以在各大手机外卖APP上面看到这里我就不截图了，但是我发现我这边的APP是没有这个功能的，所以用户体验感觉很是不好。所以在这里我就想尝试一下应用vue.js+boostrap来实现这个效果，希望各位大神多多指教
展示一下效果：
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue+boostrap最佳实践4</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link href="https://www.jb51.net/style.css"> </head> <body> <div> <div> <input v-model="searchString" type="text" placeholder="请输入标题名称"> <div>搜索</div> </div> <ul> <template v-for="msg in msgs|searchFor searchString"> <li> <span>{{msg.title}}</span> <span>{{msg.author}}</span> </li> </template> </ul> </div> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="https://www.jb51.net/script.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/vue.js"></script> </body> </html>
这一次为了读者能够更清楚的理解每个的意义，我将注释都写在代码中这样读者就能够更方便的理解
javascript代码
window.onload=function(){ var data={ searchString:"", msgs:[ { title:'the best technology is the most basic', author:'谢灿勇' }, { title:'hijacking the javascript function', author:'谢灿勇' }, { title:'use karma to test multiple broswer', author:"司徒正美" } ]}; //定义一个自定的过滤器叫做searchFor,传递一个过滤参数searchString //第一个参数指的是要过滤的数据源data Vue.filter("searchFor",function(value,searchString){ //判断传入的内容是否为空 if(!searchString){ //将要过滤的对象全部返回，也就是是相当于什么都没有操作一样 //程序也在这个地方终止不会继续向下走 return value; } //将输入的内容统一为小写或者大写 seearchString=searchString.trim().toLowerCase(); var result=[]; //item指代当前数据 result=value.filter(function(item){ //查询的内容不存在 if(item.title.toLowerCase().indexOf(searchString) !== -1){ return item; } }); return result; }); var demo=new Vue({ el:'#main', data:data, }) }
以上所述是小编给大家介绍的vue.js+boostrap项目实践(案例详解)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: