24.案例監(jiān)聽文本框數(shù)據(jù)的改變

1.監(jiān)聽文本框數(shù)據(jù)的改變的3種方式:

  • 方式1:keyup
<body>
  <div id="app">

    <!-- 分析: -->
    <!-- 1. 我們要監(jiān)聽到 文本框數(shù)據(jù)的改變钧汹,這樣才能知道 什么時候去拼接 出一個 fullname -->
    <!-- 2. 如何監(jiān)聽到 文本框的數(shù)據(jù)改變呢?灯蝴?瑞信? -->

    <input type="text" v-model="firstname" @keyup="getFullname"> +
    <input type="text" v-model="lastname" @keyup="getFullname"> =
    <input type="text" v-model="fullname">

  </div>

  <script>
    // 創(chuàng)建 Vue 實例扎酷,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        fullname: ''
      },
      methods: {
        getFullname() {
          this.fullname = this.firstname + '-' + this.lastname
        }
      }
    });
  </script>
</body>
  • 方式2:watch
<body>
  <div id="app">

    <input type="text" v-model="firstname"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">

  </div>

  <script>
    // 創(chuàng)建 Vue 實例馒闷,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        fullname: ''
      },
      methods: {},
      watch: { // 使用這個 屬性,可以監(jiān)視 data 中指定數(shù)據(jù)的變化归榕,然后觸發(fā)這個 watch 中對應的 function 處理函數(shù)
        'firstname': function (newVal, oldVal) {
          // console.log('監(jiān)視到了 firstname 的變化')
          // this.fullname = this.firstname + '-' + this.lastname

          // console.log(newVal + ' --- ' + oldVal)

          this.fullname = newVal + '-' + this.lastname
        },
        'lastname': function (newVal) {
          this.fullname = this.firstname + '-' + newVal
        }
      }
    });
  </script>
</body>
  • 方式2強化知識:watch
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 1. 導入包 -->
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">
    <router-link to="/login">登錄</router-link>
    <router-link to="/register">注冊</router-link>

    <!-- 容器 -->
    <router-view></router-view>

  </div>

  <script>
    // 2. 創(chuàng)建子組件
    var login = {
      template: '<h3>這是登錄子組件,這個組件是 奔波霸 開發(fā)的吱涉。</h3>'
    }

    var register = {
      template: '<h3>這是注冊子組件刹泄,這個組件是 霸波奔 開發(fā)的。</h3>'
    }

    // 3. 創(chuàng)建一個路由對象
    var router = new VueRouter({
      routes: [ // 路由規(guī)則數(shù)組
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive' // 和激活相關的類
    })

    // 創(chuàng)建 Vue 實例怎爵,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router,
      watch: {
        //  this.$route.path
        '$route.path': function (newVal, oldVal) {
          // console.log(newVal + ' --- ' + oldVal)
          if (newVal === '/login') {
            console.log('歡迎進入登錄頁面')
          } else if (newVal === '/register') {
            console.log('歡迎進入注冊頁面')
          }
        }
      }
    });
  </script>
</body>
  • 方式3:computed

<body>
  <div id="app">

    <input type="text" v-model="firstname"> +
    <input type="text" v-model="middlename"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">

    <p>{{ fullname }}</p>
    <p>{{ fullname }}</p>
    <p>{{ fullname }}</p>

  </div>

  <script>
    // 創(chuàng)建 Vue 實例特石,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        middlename: ''
      },
      methods: {},
      computed: { // 在 computed 中,可以定義一些 屬性鳖链,這些屬性姆蘸,叫做 【計算屬性】墩莫, 計算屬性的,本質(zhì)逞敷,就是 一個方法狂秦,只不過,我們在使用 這些計算屬性的時候推捐,是把 它們的 名稱裂问,直接當作 屬性來使用的;并不會把 計算屬性牛柒,當作方法去調(diào)用堪簿;

        // 注意1: 計算屬性,在引用的時候皮壁,一定不要加 () 去調(diào)用椭更,直接把它 當作 普通 屬性去使用就好了;
        // 注意2: 只要 計算屬性蛾魄,這個 function 內(nèi)部虑瀑,所用到的 任何 data 中的數(shù)據(jù)發(fā)送了變化,就會 立即重新計算 這個 計算屬性的值
        // 注意3: 計算屬性的求值結(jié)果畏腕,會被緩存起來缴川,方便下次直接使用; 如果 計算屬性方法中描馅,所以來的任何數(shù)據(jù)把夸,都沒有發(fā)生過變化,則铭污,不會重新對 計算屬性求值恋日;
        'fullname': function () {
          console.log('ok')
          return this.firstname + '-' + this.middlename + '-' + this.lastname
        }
      }
    });
  </script>
</body>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市嘹狞,隨后出現(xiàn)的幾起案子岂膳,更是在濱河造成了極大的恐慌,老刑警劉巖磅网,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谈截,死亡現(xiàn)場離奇詭異,居然都是意外死亡涧偷,警方通過查閱死者的電腦和手機簸喂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來燎潮,“玉大人喻鳄,你說我怎么就攤上這事∪贩猓” “怎么了除呵?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵再菊,是天一觀的道長。 經(jīng)常有香客問我颜曾,道長纠拔,這世上最難降的妖魔是什么泛啸? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任绿语,我火速辦了婚禮,結(jié)果婚禮上候址,老公的妹妹穿的比我還像新娘吕粹。我一直安慰自己,他們只是感情好岗仑,可當我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布匹耕。 她就那樣靜靜地躺著,像睡著了一般荠雕。 火紅的嫁衣襯著肌膚如雪稳其。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天炸卑,我揣著相機與錄音既鞠,去河邊找鬼。 笑死盖文,一個胖子當著我的面吹牛嘱蛋,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播五续,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼洒敏,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了疙驾?” 一聲冷哼從身側(cè)響起凶伙,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎它碎,沒想到半個月后函荣,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡扳肛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年傻挂,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片敞峭。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蝉仇,靈堂內(nèi)的尸體忽然破棺而出旋讹,到底是詐尸還是另有隱情殖蚕,我是刑警寧澤,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布沉迹,位于F島的核電站睦疫,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏鞭呕。R本人自食惡果不足惜蛤育,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望葫松。 院中可真熱鬧瓦糕,春花似錦、人聲如沸腋么。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽珊擂。三九已至圣勒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間摧扇,已是汗流浹背圣贸。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留扛稽,地道東北人吁峻。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像庇绽,于是被迫代替她去往敵國和親锡搜。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 舉一個案例瞧掺,我們要拼接一個fullname耕餐,因此要監(jiān)聽到文本框數(shù)據(jù)的改變,這樣才能知道什么時候去拼接 出一個 fu...
    Welkin_qing閱讀 15,084評論 0 2
  • 我們要天監(jiān)聽到文本框數(shù)據(jù)的改變辟狈,這樣才能知道什么時候才能拼接出一個fullname如何監(jiān)聽到文本框數(shù)據(jù)的改變:用k...
    啊_6424閱讀 93評論 0 0
  • 1肠缔、窗體 1、常用屬性 (1)Name屬性:用來獲取或設置窗體的名稱哼转,在應用程序中可通過Name屬性來引用窗體明未。 ...
    Moment__格調(diào)閱讀 4,548評論 0 11
  • vue 2.0 漸進式框架 MVC 單向通信 > m:model 數(shù)據(jù)層 保存數(shù)據(jù) > v:view視圖層 用戶界...
    web前端ling閱讀 732評論 0 0
  • 星岡公曰:“爾的官是做不盡的壹蔓,爾的才是好的趟妥,但不可傲。滿招損佣蓉,謙受益披摄。爾若不傲亲雪,更好全了!”遺訓不遠疚膊,至今尚如耳提...
    純情小男子閱讀 540評論 0 1