VeeValidate 與 Data Binding
栏目: JavaScript · 发布时间: 7年前
内容简介: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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
闪魂FLASH8网站建设实录
马谧铤 / 中国林业 / 2006-7 / 46.00元
《闪魂FLASH8网站建设实录》旨在提供以Flash(Flash 8.0为创作工具)为技术核心的整套互动网站的开发思路,其中包括了网站策划、平面设计、程序设计等实用的互联网应用技术。内容包括Photoshop CS2设计,FIash 8创作和ActionScript应用程序开发的操作流程。在技术学习的过程中.大家还将体会到顶级互动网站设计、网站建设的设计流程和思路。《闪魂FLASH8网站建设实录》......一起来看看 《闪魂FLASH8网站建设实录》 这本书的介绍吧!