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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 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 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
JavaScript错误处理
2015/02/03 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
python中精确输出JSON浮点数的方法
2014/04/18 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
JAVA高级程序员面试题
2013/09/06 面试题
班长竞选演讲稿
2014/04/24 职场文书
初中学校对照检查材料
2014/08/19 职场文书
2014年党小组工作总结
2014/12/20 职场文书
社区母亲节活动总结
2015/02/10 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers