watch觀察者
watch顧名思義，就是作為一個(gè)觀察者的形式存在，只要綁定的數(shù)據(jù)有所修改辆雾，既對(duì)應(yīng)watch里面的函數(shù)也會(huì)發(fā)生響應(yīng)的變化万伤，可以用來計(jì)算某些數(shù)值窒悔、存儲(chǔ)該內(nèi)容到LocalStorage使用、輸入過程中校驗(yàn)表單信息等敌买。
舉一個(gè)輸入賬號(hào)密碼的例子简珠，html代碼如下：
<template>
<div class="">
請(qǐng)輸入您的賬號(hào)：<input type="text" v-model="username"><br>
<p v-show="checkUsername">您的賬號(hào)必須超過6位數(shù)字</p>
請(qǐng)輸入密碼：<input type="password" v-model="password1"><br>
請(qǐng)?jiān)俅屋斎朊艽a：<input type="password" v-model="password2"><br>
<p v-show="checkPassword">兩次輸入的密碼不一致</p>
<button type="button" @click="submit">提交表單</button>
</div>
</template>
上面內(nèi)容所做的操作是，在賬號(hào)表單里面虹钮，如果輸入的字符串個(gè)數(shù)小于6個(gè)的時(shí)候會(huì)提醒聋庵，數(shù)字不足；密碼在兩次輸入如果不匹配的時(shí)候芙粱，也會(huì)顯示相應(yīng)的內(nèi)容祭玉，提示不足；其中script代碼如下：
<script>
export default {
name: 'hello',
data () {
return {
username:"",
password1:"",
password2:"",
checkUsername:false,
checkPassword:false
}
},watch:{
username:function (val,oldVal) {
// console.log(val)
// console.log(oldVal)
if(val.length>6){
this.checkUsername = false;
}else {
this.checkUsername = true;
}
},
password2:function (val,oldVal) {
if (this.password1 != this.password2){
this.checkPassword = true;
}else {
this.checkPassword = false;
}
}
},methods:{
submit:function () {
alert("提交成功春畔！")
}
}
}
</script>
我們這里主要留新查看watch這個(gè)屬性脱货，在這個(gè)屬性里面填寫要監(jiān)聽的數(shù)據(jù)，如username拐迁，既在username變化的時(shí)候蹭劈，對(duì)應(yīng)watch里面的函數(shù)也會(huì)執(zhí)行，username:function (val,oldVal)函數(shù)主要有兩個(gè)參數(shù)线召，第一個(gè)是即時(shí)值铺韧，第二個(gè)是沒有修改之前的數(shù)值，這里的賬號(hào)和密碼缓淹，我們都使用了簡(jiǎn)單的比對(duì)來判斷是否正確哈打。在watch屬性里面監(jiān)聽的函數(shù)可以做很多事情塔逃，即要數(shù)據(jù)在改變的時(shí)候描述其他事情的變化或者激發(fā)事件，這里就看個(gè)人的需要去感悟了料仗。
條件渲染是什么湾盗？
我們可以在剛剛的例子里面看到，html里面有一個(gè)v-show立轧，沒錯(cuò)格粪，事實(shí)上它就是條件渲染中的一個(gè)函數(shù),它通過判斷綁定函數(shù)中是ture和false來決定這個(gè)內(nèi)容是否展示出來，與此相對(duì)的氛改，還有另外編程中常見的if-else函數(shù)帐萎。
v-show：
<p v-show="checkUsername">您的賬號(hào)必須超過6位數(shù)字</p>
v-if
<template>
<div class="">
<h1 v-if="success">成功</h1>
<h1 v-if="error">失敗</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
success:true,
error:false
}
}
}
</script>
v-else
此處使用vue.js官方的例子：
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-for
html代碼如下：
<!--最原始的遍歷-->
<ul>
<li v-for="(item, index) in items">
{{ index }} - {{ item.name }} - {{ item.age }}
</li>
</ul>
<!--使用of 也可以代替 in-->
<ul>
<li v-for="(item, index) of items">
{{ index }} - {{ item.name }} - {{ item.age }}
</li>
</ul>
<!--特別要注意的是：對(duì)象的屬性也可以進(jìn)行遍歷，這個(gè)很有用胜卤！-->
<ul>
<li v-for="(value, key) in person">
{{ key }}: {{ value }}
</li>
</ul>
數(shù)據(jù)來源如下：
<script>
export default {
name: 'hello',
data () {
return {
success:true,
error:false,
person:{name:"張三",age:"22",school:"小學(xué)"},
items:[{
name:"liming",
age:18
},{
name:"hanmeimei",
age:20}]
}
}
}
</script>
小結(jié)
- 主要學(xué)習(xí)了watch的用法疆导，可以在改bind的屬性改變時(shí)，獲得新值和舊值葛躏。
- 必須掌握幾種遍歷方法澈段，特別要注意除了遍歷數(shù)組還可以遍歷屬性，可玩性高舰攒。
