Vue 偵聽器

本文轉載自查看原文 2019-11-02 15:44 386

偵聽器的應用場景：

數據變化時執行異步或開銷較大的操作。

數據一旦發生了變化就通知偵聽器所綁定的方法。

 1 <!-- vue 偵聽器 -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10 </head>
11 <body>
12 <div id='app'>
13 
14     <div>姓：<input v-model="firstName"></input></div>
15     <div>名：<input v-model="lastName"></input></div>
16     <div>全名：<input v-model="fullName"></input></div>
17 
18 </div>
19 
20 <script>
21     var vm = new Vue ({
22         el:'#app',
23         data:{
24             firstName:'jim',
25             lastName:'Green',
26             fullName:'Jim Green'
27         },
28         methods: {
29 
30         },
31     //    偵聽器
32         watch:{
33             firstName: function (value) {
34                 this.fullName = value + ' ' + this.lastName
35             },
36             lastName: function(value) {
37                 this.fullName =   this.firstName + ' ' + value 
38     }
39         }
40     })
41 </script>
42 </body>
43 </html>

案例：驗證用戶名是否可用

 1 <!-- vue 偵聽器 -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 
 5 <head>
 6   <meta charset="UTF-8">
 7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9   <title>Document</title>
10   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
11 </head>
12 
13 <body>
14   <div id='app'>
15 
16     <div>用戶名：<input type="text" v-model="name"><span v-text="msg"></span></div>
17 
18   </div>
19 
20   <script>
21     var vm = new Vue({
22       el: '#app',
23       data: {
24         name: '',
25         msg: '123'
26       },
27       methods: {
28 
29       },
30       //    偵聽器
31       watch: {
32         name: function (value) {
33           var that = this
34           //    數據變化調用后台接口驗證用戶名合法性
35           //    模擬接口調用
36           setTimeout(function () {
37             if (value === 'admin') {
38               that.msg = '用戶名已經存在，請更換一個'
39             } else {
40               that.msg = '用戶名可以使用'
41             }
42           }, 2000)
43           //    修改提示
44           this.msg = '正在驗證'
45         }
46       }
47     })
48   </script>
49 </body>
50 
51 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue計算屬性和偵聽器 vue 偵聽器watch 之深度監聽 deep Vue 計算屬性與方法、偵聽器的區別任務偵聽器（Task listener） Vue.js之Vue計算屬性、偵聽器、樣式綁定 Vue 偵聽器 watch 擴展之立即觸發回調、深度監聽和注銷 watch偵聽器監聽data中的變量、對象、數組 SQL Server使用偵聽器IP訪問時遇到"The target principal name is incorrect. Cannot generate SSPI context" Maven項目沒有讀取到recource配置文件資源問題：嚴重: 異常將上下文初始化事件發送到類的偵聽器實例.[org.springframework.web.context.ContextLoaderListener] 異常將上下文初始化事件發送到類的偵聽器實例.[org.springframework.web.context.ContextLoaderListener] org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sessionFactory' defined in class p