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

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进行查询操作的实例详解，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 利用Vue.js实现求职在线之职位查询功能

    利用Vue.js实现求职在线之职位查询功能

    前言 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文主要介绍的是关于利用Vue.js实现职位查询功能的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 知识点: v-on, v-for, v-if, props, $emit,动态Prop, Class 与 Style 绑定 P1 分页查询 查询参数 查询参数:

  • 利用Vue.js框架实现火车票查询系统（附源码）

    利用Vue.js框架实现火车票查询系统（附源码）

    前言 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js 今天,我就要基于这个库来搭建一个火车票查询系统.首先我们的机器上得有NodeJS环境,并且安装了npm包管理工具.因为vue是跑在node环境下的,并且我们需要用npm来安装vue. 在终端输入npm install --global vue-cli我们来全局安装vue-cli

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

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

    Vue.js进行查询操作的实例详解 实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript" ></script> <title>字符转换</title> </head>

  • MongoDB 查询操作的实例详解

    MongoDB 查询操作的实例详解 使用find或findOne进行查询.并可以进行范围查询.数据集查询.不等式查询,以及其他的一些查询. 查询将会返回DBcursor 游标只有在你需要的时候返回文档 针对游标返回的文档(结果集) 进行操作 例如:忽略一定数量的结果,或者返回结果的数量,以及对结果的排序. 1.指定需要返回的键 有时候仅仅对文档的某几个键值感兴趣,可以屏蔽返回的不感兴趣的键值,返回感兴趣的键值 mongos> db.blog.find({},{"name":1})

  • Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-

  • php mysql PDO 查询操作的实例详解

    php mysql PDO 查询操作的实例详解 <?php $dbh = new PDO('mysql:host=localhost;dbname=access_control', 'root', ''); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $dbh->exec('set names utf8'); /*添加*/ //$sql = "INSERT INTO `user` SET `log

  • vue.js表格组件开发的实例详解

    vue.js表格组件开发的实例详解

    前言 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件开发的基础 组件可以扩展 HTML 元素,封装可重用的代码.我理解为功能模块的模板吧. 对于vue来说,组件是这个样子的,我们在html里面写 <div id="example"> <my-compone

  • JS监控关闭浏览器操作的实例详解

    JS监控关闭浏览器操作的实例详解 需求如下: 用户关闭浏览器通知后台. 方案如下: 1.采用js监控关闭浏览器操作. 2.用户关闭浏览器的时候发ajax请求到后台,执行相应的业务操作 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

  • vue组件编写之todolist组件实例详解

    vue组件编写之todolist组件实例详解

    我们在topNav这个页面上插入一个todolist子组件 我不知道怎么回事,这里的markdown的代码总是串行..所以代码看得不舒服,见谅啊,我最后会放github的源代码地址. 1. 父组件topNav中注册子组件,引入子组件 <template> <div> <p>下面这一行就是定义的组件名称</p> <todo-list></todo-list> <router-view></router-view>

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • C++利用MySQL API连接和操作数据库实例详解

    C++利用MySQL API连接和操作数据库实例详解

    1.C++连接和操作MySQL的方式 系列文章: MySQL 设计和命令行模式下建立详解 C++利用MySQL API连接和操作数据库实例详解 在Windows平台,我们可以使用ADO.ODBC或者MySQL API进行连接和操作.ADO (ActiveX Data Objects,ActiveX数据对象)是Microsoft提出的一个用于存取数据源的COM组件.它提供了程序语言和统一数据访问方式OLE DB的一个中间层,也就是Microsoft提出的应用程序接口(API)用以实现访问关系或非关

  • Android中webview与JS交互、互调方法实例详解

    Android中webview与JS交互.互调方法实例详解 前言: 对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成. 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast之类要保持同一个手机风格一致的交互行为.这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据.或者是原生调用JS的方法在H5加载的时候传递一些参数. 对于原生调用JS的方法 我们需要实现一个WebViewClient,在这

随机推荐