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 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
Python机器学习之决策树和随机森林
Jul 15 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获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
CI框架常用方法小结
2016/05/17 PHP
window.open的功能全解析
2006/10/10 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python访问抓取网页常用命令总结
2017/04/11 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python3安装speech语音模块的方法
2018/12/24 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
网络维护中文求职信
2014/01/03 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
公司考勤管理制度
2015/08/04 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL