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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
javascript实现二分查找法实现代码
Nov 12 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 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图片上传存储源码并且可以预览
2011/08/26 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
浅谈Webpack打包优化技巧
2018/06/12 Javascript
Python requests发送post请求的一些疑点
2018/05/20 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
Python-for循环的内部机制
2020/06/12 Python
英国景点门票网站:attractiontix
2019/08/27 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
幼儿园老师新年寄语2015
2014/12/08 职场文书
离职感谢信
2015/01/21 职场文书
秋季运动会开幕词
2015/01/28 职场文书
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android