全域性指令編寫
vue.
directive
('trim',)
;}, inserted:
function()
, update:
function
(e,b,n)})
;
type
="text"
v-model
="text"
v-trim
>
等同於type
="text"
v-model.trim
="text"
>
directives:
}}
v-focus
>
directives:
}}
type
="text"
v-input_style
>
directives:
}// 新增提示資訊
function
tipmsg
(msg)
,2000);
}// 驗證是否是必填項
function
required()
return
true;}
// 驗證是否是郵箱
function
email()
)+$/;if
(!emailrule.
test
(el.value)
)return
true;}
// 驗證是否是手機號碼
function
phone()
$/;if(
!phonerule.
test
(el.value)
)return
true;}
// 最小值驗證
function
min(num)
return
true;}
// 最大值驗證
function
max(num)
return
true;}
// 最小長度驗證
function
minlength
(length)
return
true;}
// 最大長度進行驗證
function
maxlength
(length)
return
true;}
// 進行正規表示式的驗證
function
regex
(rules)
return
true;}
// 迴圈進行驗證
function
checkedfun()
else
}// 判斷設定了email
if(emailregex.
test
(validaterulearr[i]))
else
}// 判斷設定了 phone
if(phoneregex.
test
(validaterulearr[i]))
else
}// 判斷是否設定了最小值
if(minregex.
test
(validaterulearr[i]))
else
}// 判斷是否設定了最大值
if(maxregex.
test
(validaterulearr[i]))
else
}// 判斷設定了最小長度
if(minlengthregex.
test
(validaterulearr[i]))
else
}// 判斷設定了最大長度
if(maxlengthregex.
test
(validaterulearr[i]))
else
}// 判斷測試正規表示式
if(regexregex.
test
(validaterulearr[i]))
else}}
}// 監聽失去焦點的時候
el.addeventlistener
('blur'
,function()
);}}
}
>
>
class
="input"
>
type
="text"
v-input
v-checked=""
>
>
}span
>
div>
class
="input"
>
type
="text"
v-input
v-validate="
'required|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'
" placeholder
="多選驗證"
>
div>
class
="input"
>
type
="text"
v-input
v-validate="
'required|phone'
" placeholder
="驗證手機號碼"
>
div>
class
="input"
>
type
="text"
v-input
v-validate="
'required|email'
" placeholder
="驗證郵箱"
>
div>
div>
template
>
>
.input
.check input
.check span
.tipsdiv
.tipsdiv:before
style
>
vue中自定義指令和自定義過濾器
vue中除了核心功能內建的指令外，也允許註冊自定義指令。有的情況下，對普通dom元素進行底層操作，這時候就會用到自定義指令。自定義指令又分為全域性的自定義指令和區域性自定義指令。全域性自定義指令是通過vue.directive 第乙個引數是指令的名稱 vue.directive focus 區域性自...
vue自定義指令實現v model
指令是vue中非常重要的內容，了解指令的用法可以更好的服務於業務場景，方便高效，本文主要介紹指令的基本概念和用法，簡單模擬v model實現的功能。除了內建指令，vue.js 也允許註冊自定義指令。自定義指令提供一種機制將資料的變化對映為 dom 行為。可以用vue.directive id,def...
Vue自定義指令
vue有很多內建的指令，比如說v on，v model，v clock等等，每乙個指令會完成一定的功能，但是這些內建的指令總會有些侷限性，要是能夠自定義指令就好了 vue的自定義指令分類 全域性指令和區域性指令 vue指令的定義和用法 以全域性指令為例 1.語法 vue.directive 指令id...