vue自定義鍵盤信息、監聽數據變化的方法示例【基于vm.$watch】

 更新時間:2019-04-17 21:43:09   作者:佚名   我要評論(0)

本文實例講述了vue自定義鍵盤信息、監聽數據變化的方法。分享給大家供大家參考,具體如下:
@keydown.up

@keydown.enter

@keydown.a/b/c....
自定義鍵盤信

本文實例講述了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程序設計有所幫助。

您可能感興趣的文章:

  • vue 監聽鍵盤回車事件詳解 @keyup.enter || @keyup.enter.native
  • vue監聽鍵盤事件的快捷方法【推薦】
  • vue點擊input彈出帶搜索鍵盤并監聽該元素的方法
  • Vue.js每天必學之計算屬性computed與$watch
  • vue.js中$watch的用法示例
  • 詳解vue2 $watch要注意的問題
  • Vue.js 中的 $watch使用方法
  • 深入理解vue.js中$watch的oldvalue與newValue
  • 深入對Vue.js $watch方法的理解
  • Vue.Js中的$watch()方法總結

相關文章

  • vue自定義鍵盤信息、監聽數據變化的方法示例【基于vm.$watch】

    vue自定義鍵盤信息、監聽數據變化的方法示例【基于vm.$watch】

    本文實例講述了vue自定義鍵盤信息、監聽數據變化的方法。分享給大家供大家參考,具體如下: @keydown.up @keydown.enter @keydown.a/b/c.... 自定義鍵盤信
    2019-04-17
  • PHP implode()函數用法講解

    PHP implode()函數用法講解

    PHP implode() 函數 實例 把數組元素組合為一個字符串: <&#63;php $arr = array('Hello','World!','Beautiful','Day!'); echo implode(" ",$arr); &#63
    2019-04-17
  • Properties 持久的屬性集的實例詳解

    Properties 持久的屬性集的實例詳解

    Properties 持久的屬性集的實例詳解 特點: 1、Hashtable的子類,map集合中的方法都可以用。 2、該集合沒有泛型。鍵值都是字符串。 3、它是一個可以
    2019-04-17
  • Java 使用正則表達式對象實現正則的獲取功能

    Java 使用正則表達式對象實現正則的獲取功能

    獲取需要使用到正則的兩個對象: 使用的是用正則對象Pattern 和匹配器Matcher。 用法: 范例: Pattern p = Pattern.compile("a*b"); Matcher m =
    2019-04-17
  • .Net Core自定義配置源從配置中心讀取配置的方法

    .Net Core自定義配置源從配置中心讀取配置的方法

    前言 配置,幾乎所有的應用程序都離不開它。.Net Framework時代我們使用App.config、Web.config,到了.Net Core的時代我們使用appsettings.json,這些我們再熟
    2019-04-17
  • .NET實現工資管理系統

    .NET實現工資管理系統

    本文實例為大家分享了.NET實現工資管理系統的具體代碼,供大家參考,具體內容如下 using System; using System.Collections.Generic; using System.Linq
    2019-04-17
  • 淺談SpringMVC jsp前臺獲取參數的方式 EL表達式

    淺談SpringMVC jsp前臺獲取參數的方式 EL表達式

    JAVA: request.setAttribute("msg", "1234"); session.setAttribute("msg2", "1234"); JSP: ${requestScope.msg} ${sessionScope.msg2} JAVA: Mo
    2019-04-17
  • 淺談PHPANALYSIS提取關鍵字

    淺談PHPANALYSIS提取關鍵字

    最近在開發一個文章模塊功能,設計那邊提出要給文章生成對應標簽,用于文章關聯推送,這里和大家分享一下實現過程; 這里需要用到PHPAnalysis,下載鏈接如下
    2019-04-17
  • 正則表達式語句中的注釋方法分享

    正則表達式語句中的注釋方法分享

    小括號的另一種用途是通過語法(&#63;#comment)來包含注釋。 例如:2[0-4]\d(&#63;#200-249)|25[0-5](&#63;#250-255)|[01]&#63;\d\d&#63;(&#63;#0-199)。 要包
    2019-04-17
  • JSP頁面跳轉方法大全

    JSP頁面跳轉方法大全

    先來介紹一下在服務端JSP腳本中跳轉頁面的幾種方法: 1. response.sendRedirct("跳轉到頁面"); 該方法通過修改HTTP協議的HEADER部分,對瀏覽器下達重定向指令的
    2019-04-17

最新評論

最近更新的內容

本類推薦

买宝宝用品赚钱吗 股票投资软件荐杨方配资平台 北京11选五走势图遗漏 湖北快3走势图360 北京11选5每天多少期 赛车游戏 陕西11选五任5最大遗漏 秒速赛车害了多少人 山东群英会玩法规则 福建体彩36选7走势图1 福彩开奖结果 涨停板信号买入18法 秒速赛车开奖结果走势图 七位数玩法与规则图解 组选包胆是指什么 广东快乐10分开奖走势图 青海十一选五今天开奖结果