前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue-监听使用方法和过滤器

Vue-监听使用方法和过滤器

作者头像
默默的成长
发布2022-10-29 16:31:29
3180
发布2022-10-29 16:31:29
举报
文章被收录于专栏:前端记录笔记前端记录笔记

前言

  • 今天是自学VUE整理知识点的第四天呢,今天整理一下过滤器,watch监听的知识点~~~~
  • 继续加油冲冲冲过滤器
  • 过滤器的作用:为页面中数据进行添油加醋
  • 有两种: 局部过滤器 全局过滤器
  • 格式:
    • 1.声明过滤器
    • 2.{{数据|过滤器的名字}}局部过滤器代码
  • 局部⾃定义过滤器:关键用到的是使⽤filters属性,第⼀种和第⼆种声明⽅式都可以去实现。

`

代码语言:javascript
复制
      Vue.component('myLi',{
            template:`
            `
        });
               var App={
            data(){
                return{
                    price:0,
                    msg:'hello filter'
                }
            },
            template:`
            <div>
             <input type='number' v-model='price'  />
             <h3>{{price | myCurrentcy}}</h3>
             <h4>{{msg |myReverse 	 }}</h4>
            </div>
            `,
            filters:{
                //  声明过滤器
                myCurrentcy:function(value){
                    return "¥"+value
                }
            }
        };
        
        new Vue({
            el:'#app',
            components:{
                App,
            },
            template:`<App/>`
        })            

`

全局过滤器

优点:在项目中经常使用过滤器对数据进行格式化后显示在页面上,比如日期格式转化,数值转换成状态文字等过滤器,如果在每个.vue页面都复制同一个过滤器进行使用,虽然是没问题,但是如果过滤器方法中,需要追加新的情况判断或出现Bug时就要将每个.vue内的过滤器进行修改,既费时又费力,所以为了项目维护,可以优先考虑定义全局过滤器

  • 全局过滤器代码:
代码语言:javascript
复制
    Vue.filter('myReverse',function(value){
            return value.split('').reverse().join('');
            
        });`

watch监听

vue提供了侦听属性watch,可以很好的观察和侦听vue实例响应数据的变化。

  • 基本的数据类型
    • 基本的数据类型 简单监听
    • 复杂的数据类型 深度监听简单监听

通过watch方法:方法里有(新值,旧值)用来监听 也可添加条件,当新值等于一个值时,输出其他值。*

代码语言:javascript
复制
  <input type="text"  v-model="msg">
      <h3>{{msg}}</h3>
  new Vue({
          el:'#app',
          data(){
              return{
              msg:'',
              stus:[{name:'jack'}]
              }
          },
          watch:{
              msg:function(newV,oldV){
                  console.log(newV,oldV);
                  if(newV ==='sir'){
                      console.log('sir来了')
                  }
              }

复杂监听

  • 对于复杂的监听事件 使用stus进行深度监听*
代码语言:javascript
复制
    <button @click="stus[0].name='rose'">改变 </button>
            <h4>{{stus[0].name}}</h4>
  new Vue({
                el:'#app',
                data(){
                    return{
                    msg:'',
                    stus:[{name:'jack'}]
                    }
                },
    
                     // 监听复杂数据类型 object array 深度监听	
                    stus:{
                        deep:true,//深度监听
                        handler:function(newV,oldV){
                            console.log(newV[0].name);
                        }
                    }
                }	
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-06-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
    • 全局过滤器
      • watch监听
        • 复杂监听
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档