VeeValidate 與 Data Binding
栏目: JavaScript · 发布时间: 5年前
内容简介：Data Binding 為 Vue 的招牌之一，既然如此，VeeValidate 也能搭配 Data Binding 一起運作嗎 ?Vue 2.5.17VeeValidate 2.1.2
Data Binding 為 Vue 的招牌之一，既然如此，VeeValidate 也能搭配 Data Binding 一起運作嗎 ?
Version
Vue 2.5.17
VeeValidate 2.1.2
Data Binding to String
demo.vue
<template>
<div>
<div>
<input v-validate="rules" name="email" type="text">
</div>
<div>
<span>{{ errors.first('email') }}</span>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
/** data */
const data = function() {
return {
rules: 'required|email',
};
};
export default {
name: 'demo',
data,
};
</script>
18 行
const data = function() {
return {
rules: 'required|email',
};
};
將 rule string 放在 Vue 的 data 內。
第 4 行
<input v-validate="rules" name="email" type="text">
將 VeeValidate 的 v-validate directive 綁定到 data 的 rules 。
Data Binding to Object
demo.vue
<template>
<div>
<div>
<input v-validate="rules" name="email" type="text">
</div>
<div>
<span>{{ errors.first('email') }}</span>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
/** data */
const data = function() {
return {
rules: {
required: true,
email: true,
},
};
};
export default {
name: 'demo',
data,
};
</script>
19 行
const data = function() {
return {
rules: {
required: true,
email: true,
},
};
};
rules 改用 object，每個 VeeValidate 的 rule 為 key，若為 true 則啟用 rule，若為 false 則補啟用。
string 或 object 寫法都是 VeeValidate 合法方式，若要動態 toggle rule，則 object 較方便
Conclusion
- Vee Validate 不再只是寫死在 HTML，也可以寫在 ECMAScript，再透過 Vue 的 Data Binding 綁定即可
Sample Code
完整的範例可以在我的 GitHub 上找到
Reference
以上所述就是小编给大家介绍的《VeeValidate 與 Data Binding》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
