013_Vue监听器
生活随笔
收集整理的這篇文章主要介紹了
013_Vue监听器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. 監(jiān)聽器的應(yīng)用場(chǎng)景
1.1. 數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷比較大的操作。
1.2. 監(jiān)聽器用法?
watch: {// 監(jiān)聽firstName的值的變化firstName: function(val){this.fullName = val + "" + this.lastName;} }2. 監(jiān)聽器例子
2.1. 代碼?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>監(jiān)聽器</title></head><body><div id="app"><div><span>姓: </span><input type="text" v-model="firstName" /></div><div><span>名: </span><input type="text" v-model="lastName" /></div><div>{{fullName}}</div><div>{{computedFullName}}</div><hr /><div><span>用戶名:</span><span><input type="text" v-model.lazy='userName' /></span><span>{{tip}}</span></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {firstName: "",lastName: "",fullName: "",userName: "",tip: ""},methods: {checkUserName: function(userName){var me = this;setTimeout(function(){if(userName == "zhangsan"){me.tip = "用戶名已經(jīng)存在, 請(qǐng)換一個(gè)..."}else{me.tip = "用戶名可用..."}}, 2000);}},computed: {computedFullName: function(){var value = this.firstName + this.lastName;console.log(value)return value;}},watch: {firstName: function(val){this.fullName = val + "" + this.lastName;},lastName: function(val){this.fullName = this.firstName + val;},userName: function(val){this.checkUserName(val);this.tip = "正在驗(yàn)證...";}}});</script></body> </html>2.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的013_Vue监听器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 012_Vue计算属性
- 下一篇： 014_Vue过滤器