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

人气：567 时间：2019-04-15

这篇文章主要为大家详细介绍了vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

本文实例讲述了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程序设计有所帮助。

本文来自：http://www.q1010.com/184/6831-0.html

注：关于vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：vue+php实现的微博留言功能示例

下一篇：使用element-ui table expand展开行实现手风琴效果