vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】

程序员文章站 2022-11-26 08:06:37

本文实例讲述了vue自定义键盘信息、监听数据变化的方法。分享给大家供大家参考，具体如下： @keydown.up @keydown.enter @keydown.a/...

本文实例讲述了vue自定义键盘信息、监听数据变化的方法。分享给大家供大家参考，具体如下：

@keydown.up
@keydown.enter
@keydown.a/b/c....

自定义键盘信息:

vue.directive('on').keycodes.ctrl=17;
vue.directive('on').keycodes.myenter=13;

@keydown.a/b/c....

<input type="text" @keydown.c="show">

自定义键盘信息:

vue.directive('on').keycodes.ctrl=17;
vue.directive('on').keycodes.myenter=13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
  </style>
  <script src="vue.js"></script>
  <script>
    vue.directive('on').keycodes.ctrl=17; //
    vue.directive('on').keycodes.myenter=13;
    window.onload=function(){
      var vm=new vue({
        el:'#box',
        data:{
          a:'blue'
        },
        methods:{
          show:function(){
            alert(1);
          }
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <input type="text" @keydown.myenter="show | debounce 2000">
  </div>
</body>
</html>

监听数据变化:

vm.el/el/mount/$options/....
vm.$watch(name,fncb); //浅度

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      var vm=new vue({
        el:'#box',
        data:{
          json:{name:'strive',age:16},
          b:2
        }
      });
      vm.$watch('json',function(){
        alert('发生变化了');//浅监听，json里面某个属性变，是不会监听到的
      });
      document.onclick=function(){
        vm.json.name='aaa';
      };
    };
  </script>
</head>
<body>
  <div id="box">
    {{json | json}}//json过滤相当于 json.string
    <br>
    {{b}}
  </div>
</body>
</html>

vm.$watch(name,fncb,{deep:true}); //深度监视

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      var vm=new vue({
        el:'#box',
        data:{
          json:{name:'strive',age:16},
          b:2
        }
      });
      vm.$watch('json',function(){
        alert('发生变化了');
      },{deep:true});
      document.onclick=function(){
        vm.json.name='aaa';
      };
    };
  </script>
</head>
<body>
  <div id="box">
    {{json | json}}
    <br>
    {{b}}
  </div>
</body>
</html>

希望本文所述对大家vue.js程序设计有所帮助。

上一篇： ORA-19809:超出了恢复文件数的限制

下一篇： sqlserver—数据完整性（理论篇）