Vue.js进行查询操作的实例详解


Posted in Javascript onAugust 25, 2017

Vue.js进行查询操作的实例详解

实例代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="../lib/vue.min.js" type="text/javascript" ></script>
    <title>字符转换</title>
  </head>
  <body>
    <div id="app">
      请输入查询关键字:<input type="text" v-model="search" />
      <table>
        <tr>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
        </tr>
        <tr v-for='x in list'>
          <td>{{x.name}}</td>
          <td>{{x.price}}</td>
          <td>{{x.num}}</td>
        </tr>
      </table>
    </div>
    <script type="text/javascript">
      var vm=new Vue({
        el:'#app',
        data:{
        /*定义空数组装信息*/
          info:[],
        /*定义变量装查询输入的字符串*/
          search:''
        },
        /*computed比methods效率高,不需要重新渲染页面*/
        computed:{
          list:function(){
            var arr =[];
            for(var i=0;i<this.info.length;i++){
              if(this.info[i].name.indexOf(this.search)!=-1){
                arr.push(this.info[i])
              }
            }
            return arr;

          }
        }
      })
      for(var i = 1;i<20;i++){
        vm.info.push({name:'手机'+i,price:1000*i,num:i})
      }
    </script>
  </body>
</html>

效果如图:

Vue.js进行查询操作的实例详解

Vue.js进行查询操作的实例详解

补充:

Vue.js进行查询操作的实例详解

以上就是Vue.js进行查询操作的实例详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
一个tab标签切换效果代码
Mar 27 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 #Javascript
Vue.js框架路由使用方法实例详解
Aug 25 #Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 #Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 #jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 #Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 #Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 #Javascript
You might like
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
js实现div色块碰撞
2020/01/16 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
python算法学习之基数排序实例
2013/12/18 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python中取整的几种方法小结
2017/01/06 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
python连接mongodb集群方法详解
2020/02/13 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
中文专业求职信
2014/06/20 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
工作态度不好检讨书
2015/05/06 职场文书
golang import自定义包方式
2021/04/29 Golang
详解mysql三值逻辑与NULL
2021/05/19 MySQL