vue过滤器和键盘修饰符

最新推荐文章于 2024-09-13 14:34:15 发布

qy220824

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量168

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_59185329/article/details/126962818

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

vue过滤器和修饰符

一、过滤器
二、键盘修饰符

一、过滤器

使用语法：
1、{{变量 | 过滤器名}}
2、{{变量 | 过滤器名 | 过滤器名}}，后面过滤器的data就是前面表达式传过来的值
注意事项：
过滤器可以用在两个地方：双花括号插值和v-bind表达式
过滤器函数的返回值就是最终显示的值

1、全局定义

通过Vue提供的filter方法定义：Vue.filter()
第一个参数：过滤器名字
第二个参数：过滤器执行函数（数据data，format(传的参数即格式))

在任意的控制区域内都有效

<body>
  <div id="app">
    <p>{{content}}</p>
    <p>{{content | becomeStar}}</p>
  </div>
  <div id="app2">
    <p>{{content | becomeStar}}</p>
  </div>
</body>
<script>
  // 全局过滤器
  // 第一个参数：过滤器名字   第二个参数：函数（数据，format(传的参数))
  Vue.filter('becomeStar',function(data,format){
    return data.replace('敏感','**')
  })
  // app
  let vm = new Vue({
    el:"#app",
    data:{
      msg:'当前时间',
      time: new Date,
      content:'它是敏感词汇'
    },
    methods:{
    }
  })
    //app2
  let vm2 = new Vue({
    el:"#app2",
    data:{
      content:'它是敏感词汇'
    },
    methods:{
    },
</script>

2、私有定义

filters这个是实例化Vue的一个参数，和data,methods平级的。
只有在定义的当前控制区域内有效

<body>
  <div id="app">
    <p>{{content}}</p>
    <p>{{content | becomeStar}}</p>
    <!-- <p>{{content | becomeStar | becomeStr2}}</p>  报错 -->

  </div>
  <div id="app2">
    <p>{{content | becomeStar | becomeStr2}}</p>
  </div>
</body>
<script>
  // 全局过滤器
  Vue.filter('becomeStar',function(data,format){
    return data.replace('敏感','**')
  })
  // app
  let vm = new Vue({
    el:"#app",
    data:{
      msg:'当前时间',
      time: new Date,
      content:'它是敏感词汇'
    },
    methods:{
    }
  })
  //app2
  let vm2 = new Vue({
    el:"#app2",
    data:{
      content:'它是敏感词汇'
    },
    methods:{
    },
    // 局部过滤器，与el、data、methods同级
    filters:{
      becomeStr2(data,format){
        return data.replace('它','*');
      }
    }
  })
</script>

3、时间格式化实例

<body>
  <div id="app">
    <p>{{msg}}</p>
    <p>{{time | timeFormat('YYYY-MM-DD')}}</p>
  </div>
</body>
<script>
  // 全局过滤器
  Vue.filter('timeFormat',function(data,format){
    let year = data.getFullYear();
    let month = (data.getMonth() + 1).toString().padStart(2,'0');
    let date = data.getDate().toString().padStart(2,'0');
    return format.replace('YYYY',year).replace('MM',month).replace('DD',date);
  })
  // app
  let vm = new Vue({
    el:"#app",
    data:{
      msg:'当前时间',
      time: new Date,
    },
    methods:{
    }
  })
</script>

二、键盘修饰符

键盘事件：keyup、keydown

1、监听所有按键

@keyup=“事件”
任何一个按键都会触发事件

<div id="app">
      <!-- 监听按键 所有的按键 -->
      <div>
        监听所有按键
        <input type="text" @keyup="getKeyWord" v-model="value" />
      </div>
</div

let vm = new Vue({
      el: "#app",
      data: {
        value: "",
      },
      methods: {
        getKeyWord() {
          console.log(this.value);
        },
      },
    });

运行结果如下：
在这里插入图片描述

2、监听指定按键

1、使用按键码

@keyup.按键码=“事件”
每个键盘按键都会对应一个键盘码

 <div id="app">
      <!-- 监听指定按键 .按键码  65-a 66-b-->
      <div>
        监听指定按键
        <!-- c不触发 -->
        <input type="text" @keyup.c="getKeyWord" v-model="value" />
        <input type="text" @keyup.65="getKeyWord" v-model="value" />
      </div>
</div>

运行结果如下：
在这里插入图片描述

2、使用按键别名

@keyup.按键别名=“事件”
vue提供的按键别名
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

<div>
        使用按键别名enter:
        <input type="text" @keyup.enter="getKeyWord" v-model="value" />
        space:
        <input type="text" @keyup.space="getKeyWord" v-model="value" />
      </div>

3、使用自定义按键别名

Vue.config.keyCodes.f1 = 112
@keyup.自定义按键别名=“事件”

 <div>
        自定义按键别名
        <input type="text" @keyup.a="getKeyWord" v-model="value">
      </div>

Vue.config.keyCodes.a = 65;

4、特殊按键

<!-- 特殊按键-->
      F5
      <!-- 会刷新 .prevent不能阻止-->
      <input type="text" @keyup.f5="getKeyWord" v-model="value">
      <input type="text" @keyup.f5.prevent="getKeyWord" v-model="value">

      tab
      <!-- 切换到下一个输入框 -->
      <input type="text" @keyup.tab="getKeyWord" v-model="value">
      <input type="text" @keyup.tab.prevent="getKeyWord" v-model="value">