abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>觀察者/偵聽(tīng)器/監(jiān)聽(tīng)器</title> </head> <body> <div id="box">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>觀察者/偵聽(tīng)器/監(jiān)聽(tīng)器</title>
</head>
<body>
<div id="box">
用戶名:<input type="text" v-model="username">
<h3>{{length}}</h3>
<!-- v-show指令，true顯示，false不顯示 -->
<h3 v-show="isShow" style="warning">{{messages}}</h3>
</div>
<script type="text/javascript" src="static/Vue.js"></script>
<script type="text/javascript">
new Vue({
//綁定一個(gè)掛載點(diǎn)
el:'#box',
//創(chuàng)建一個(gè)數(shù)據(jù)模型
data:{
username:'',
length:0,
messages:'用戶名太短了',
isShow:false,
warning:'color:red'
},
//watch偵聽(tīng)器屬性，監(jiān)聽(tīng)是頁(yè)面中變量值的變化
watch:{
username:function(){
this.length++;
if(this.length<6){
this.isShow = true;
}else{
this.isShow = false;
}
}
}
})
</script>
</body>
</html>首先引用Vue.js，new Vue()創(chuàng)鍵Vue對(duì)象字面量，在內(nèi)部{}中寫入規(guī)定好的屬性和自己需要的屬性值，el：是綁定掛載點(diǎn)，data:創(chuàng)建一個(gè)數(shù)據(jù)模型，watch偵聽(tīng)器屬性，監(jiān)聽(tīng)是頁(yè)面中變量值的變化，本節(jié)課中是通過(guò)watch
監(jiān)聽(tīng)username的變化，根據(jù)不同的變化，決定messages是否顯示。
Correcting teacher：韋小寶Correction time：2019-01-03 09:14:29
Teacher's summary：寫的很不錯(cuò)！vuejs中好多功能都是很強(qiáng)大的！課后可以沒(méi)事看看相關(guān)的手冊(cè)，那樣你可以收獲更多哦！