vue.js侦听器和过滤器的使用及使用案例

最新推荐文章于 2022-10-17 11:01:42 发布

dat_stick

最新推荐文章于 2022-10-17 11:01:42 发布

阅读量415

点赞数

本文链接：https://blog.csdn.net/dat_stick/article/details/106028441

版权

1.侦听器

vue.js中侦听器用于数据变化时执行异步或开销较大的操作
当侦听器所绑定数据发生变化时，通知到侦听器所绑定的方法，执行该方法
下面所做的例子为模拟注册时检查用户名是否可用操作
通过侦听input框中的内容对input框后方的提示进行改变，并判断用户名是否可用

<body>
    <div id="app">
        <span>userName：</span>
        <span>
            <input type="text" v-model.lazy='uname'>`      
            <!--v-model.lazy:失去焦点时才触发其绑定事件-->
        </span>
        <span>{{tips}}</span>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                tips: '',
                uname: ''
            },
            methods:{
                checkName: function(uname){
                    //原本代码应为调用接口 现采用定时任务的方式模拟接口调用的延时效果
                    var that = this;        //that用于缓存修改的数据tips
                    setTimeout(function(){
                        //模拟接口调用
                        if(uname == 'admin')
                            that.tips = "username has been used";
                        else
                            that.tips = "success";
                    },2000)
                }
            },
            //监听器
            watch: {
                uname: function(val){
                    //调用后台接口验证用户名的合法性
                    this.checkName(val);
                    this.tips = 'checking...';
                }
            }
        });
    </script>
</body>
</html>

在进行编辑时曾产生过{{tips}}直接显示在live server所创建的界面的情况，多半是以下原因造成：
1.显示内容的span标签未写到所绑定id为app的div元素下
2.methods，watch中有语法错误，使其无法正常显示

2.过滤器

vue.js中过滤器用于格式化数据，如将字符串格式化为首字母大写，将日期格式化为指定的格式等
具体操作在案例中给出
案例1：将文本框中的字符串改为首字母大写格式

<body>
    <!--将字符串msg首字母变为大写-->
    <div id="app">
        <input type="text" v-model="msg">
        <span>{{msg | upper}}</span>
    </div>
    <script type="text/javascript">
    //过滤器操作
    //第一个参数'upper'为过滤器名称
    //第二个回调函数function中val为所传的值
    Vue.filter('upper',function(val){
        //通过拼接字符串获得首字母大写的数据
        return val.charAt(0).toUpperCase() + val.slice(1);
    })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: ''
            }
        });
    </script>
</body>

还可以进行级联操作
定义一个lower监听器，实行首字母小写操作
写为{{msg | upper | lower}}

<body>
    <!--将字符串msg首字母变为大写-->
    <div id="app">
        <input type="text" v-model="msg">
        <div>{{msg | upper}}</div>
        <div>{{msg | upper | lower}}</div>
    </div>
    <script type="text/javascript">
    //过滤器操作
    //第一个参数'upper'为过滤器名称
    //第二个回调函数function中val为所传的值
    Vue.filter('upper',function(val){
        //通过拼接字符串获得首字母大写的数据
        return val.charAt(0).toUpperCase() + val.slice(1);
    })
    Vue.filter('lower',function(val){
        return val.charAt(0).toLowerCase() + val.slice(1);
    })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: ''
            }
        });
    </script>
</body

live server显示结果：
在这里插入图片描述
过滤器还可以配合v-bind语句，在绑定数据属性时使用

<div id="app">
        <input type="text" v-model="msg">
        <div>{{msg | upper}}</div>
        <div>{{msg | upper | lower}}</div>
        //通过v-bind绑定类
        <div :abc='msg | upper'></div>
</div>

可以看出第三个div已经被绑定上了大写后的"hello"类
带参数的过滤器：
模拟实现将日期格式调整为yyyy-mm-dd的格式

<body>
    <div id="app">{{date | dateFormat("yyyy-mm-dd")}}</div>
    <script type="text/javascript">
    //arg用于传递参数，可定义多个arg
    //使用：{{date | dateFormat(arg)}}
    Vue.filter('dateFormat',function(value,arg){
        if(arg == "yyyy-mm-dd"){
            var ret = '';
            ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
            //需要return一个值作为过滤后得到的数据
            return ret;
        }
    })
        var vm = new Vue({
            el: '#app',
            data: {
                date: new Date()
            }
        });
    </script>
</body>

改良版：

Vue.filter('format', function(value, arg) {
      function dateFormat(date, format) {
          if (typeof date === "string") {
              var mts = date.match(/(\/Date\((\d+)\)\/)/);
              if (mts && mts.length >= 3) {
                  date = parseInt(mts[2]);
              }
          }
          date = new Date(date);
          if (!date || date.toUTCString() == "Invalid Date") {
              return "";
          }
          var map = {
              "M": date.getMonth() + 1, //月份 
              "d": date.getDate(), //日 
              "h": date.getHours(), //小时 
              "m": date.getMinutes(), //分 
              "s": date.getSeconds(), //秒 
              "q": Math.floor((date.getMonth() + 3) / 3), //季度 
              "S": date.getMilliseconds() //毫秒 
          };

          format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
              var v = map[t];
              if (v !== undefined) {
                  if (all.length > 1) {
                      v = '0' + v;
                      v = v.substr(v.length - 2);
                  }
                  return v;
              } else if (t === 'y') {
                  return (date.getFullYear() + '').substr(4 - all.length);
              }
              return all;
          });
          return format;
      }
      return dateFormat(value, arg);
    })
    var vm = new Vue({
      el: '#app',
      data: {
        date: new Date()
      }
    });

可以直接拿来用作日期过滤器

dat_stick

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js侦听器和过滤器的使用及使用案例

vue.js中侦听器用于数据变化时执行异步或开销较大的操作当侦听器所绑定数据发生变化时，通知到侦听器所绑定的方法，执行该方法下面所做的例子为模拟注册时检查用户名是否可用操作通过侦听input框中的内容对input框后方的提示进行改变，并判断用户名是否可用<body> <div id="app"> <span>userName：</span> <span> <input t
复制链接

扫一扫