利用Vue計算資料屬性實現簡單的表單校驗
阿新 • • 發佈:2018-12-10
計算資料屬性(官網稱呼),又叫動態資料繫結(相對於靜態資料繫結而言).可以在dom渲染之前修改資料.按照官網的解釋,計算資料屬性是為了簡化模板的運算邏輯.從而利於維護.把複雜的邏輯繫結在computed裡.當然,利用它也可以做很多事情.比如單選,全選的實現.今天簡單實現一下表單的校驗.原理邏輯都差不多.
初學者需注意:
1.計算屬性不支援非同步.如果需要非同步,請用watch方法.
2.另外,到底是用computed還是watch.官網的建議是能用computed儘量用computed.實現不了的再用watch.因為假入我們輸入的結果和上一次一致的時候.watch每次都會執行.而computed不會.這樣,watch會增加一些開銷.以後有時間再詳細說他倆的區別.
程式碼邏輯很簡單,直接看程式碼吧
<template> <div> <input type="text" v-model="username"> <p style="color: red">{{msg}}</p> </div> </template> <script> export default = { data() { return { username: '', } }, computed: { msg() { if(this.username.length < 3) { return "短了" } else if(this.username.length > 3) { return "長了" }else { return '合適' } } } } </script>
效果如圖:
當然,判斷語句也可以這樣寫,也是沒問題的.
msg() {
return this.username.length > 3
? "長了"
: this.username.length < 3
? "短了"
: this.username.length == 3
? "合適" : "";
}
其實邏輯倒是很簡單.初學者容易犯的錯誤就是不知道應該計算誰.這個例子中.msg是根據username計算得出的.所以,msg應該寫在computed裡.