Vue.js 監聽屬性 watch,我們可以通過 watch 來響應數據的變化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
用戶名 : <input id="firstname" type="text" v-model.lazy="uname" >{{tip}} <!--.lazy相當於失去焦點事件-->
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
uname:'',
tip:''
},
methods:{
checkName:function (name) {
var that = this
setTimeout(function () {//設置演示,模擬後臺傳送數據
if(name=='admin'){
that.tip='用戶名存在'
}else{
that.tip='用戶名可以使用 '
}
} ,200)
}
},
watch:{
uname:function (val) {
this.checkName(val);
this.tip="正在驗證。。"
}
}
})
</script>
</body>
</html>