vue.js实战——props数据验证（自定义构造器检测）
Vue.component('my-component',{
props:{
//必须是数字类型
propA:Number,
//必须是字符串或数字类型
propB:[String,Number],
//布尔值，如果没有定义，默认值就是true
propC:{
type:Boolean,
default:true
},
//数字，而且是必传
propD:{
type:Number,
required:true
},
//如果是数组或对象，默认值必须是一个函数来返回
propE:{
type:Array,
default:function (){
return [];
}
},
//自定义一个验证函数
propF:{
validator:function (value){
return value>10;
}
}
}
})
验证的type类型可以是：
String
Number
Boolean
Object
Array
Function
type也可以是一个自定义构造器，使用instanceof检测。
当props验证失败时，在开发版本下会在控制台抛出一条警告。
自定义构造器测试：
<body>
<div id="app">
{{myObj}}
<my-component :my-obj="12"></my-component>
<my-component :my-obj="myObj"></my-component>
</div>
<script>
function MyObj(){
this.name=1;
this.age=2;
}
var myObj=new MyObj();
console.log(new MyObj()); Vue.component('my-component',{
props:{
//自定义构造器测试
myObj:MyObj,
},
template:'<div>自定义构造器测试 ——{{myObj}}</div>' })
new Vue({
el:'#app',
data:{
myObj:myObj
}
})
</script>
</body>
显示如下：
传入12时报错
http://www.cnblogs.com/exhuasted/p/7250452.html
vue.js实战——props数据验证（自定义构造器检测）的更多相关文章
- vue.js实战——props单向数据流
Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存 ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- Atitit vue.js 把ajax数据 绑定到form表单
Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
- Vue.js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
- JMeter接口测试实战-动态数据验证
JMeter接口测试实战-动态数据验证 说到验证就不得不说断言, 先来看下JMeter官方给出断言(Assertion)的定义, 用于检查测试中得到的响应数据等是否符合预期,用以保证测试过程中的数据交 ...
- vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- Vue.js实战学习笔记（中）
1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...
随机推荐
- Entity Framework 异常： 'OFFSET' 附近有语法错误。\r\n在 FETCH 语句中选项 NEXT 的用法无效。
在使用 EF 的时候,突然发现更新后在服务器中运行出错,异常信息主要包含以下信息: 'OFFSET' 附近有语法错误.\r\n在 FETCH 语句中选项 NEXT 的用法无效.\r\n关键字 'AS' ...
- ConfirmCancelBottomSheetDialog【确认取消底部对话框】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 继承BottomSheetDialog,实现简单的确认取消对话框样式. 效果图 代码分析 ConfirmCancelBottomSh ...
- java线程通信与协作小结 多线程中篇（十六）
在锁与监视器中我们对Object中的方法进行了简单介绍 以监视器原理为核心,三个方法:wait,notify.notifyAll,可以完成线程之间的通信 当然,不会像“语言”似的,有多种多样的沟通 ...
- LeetCode 上最难的链表算法题，没有之一！
题目来源于 LeetCode 第 23 号问题:合并 K 个排序链表. 该题在 LeetCode 官网上有关于链表的问题中标注为最难的一道题目:难度为 Hard ,通过率在链表 Hard 级别目前最低 ...
- 推荐三个 VSCode 摸鱼插件
周三是一周中最难以度过的一天,离上个周末过去了两天,离下个周末也还有两天.为了让各位更好地搬(mo)砖(yu),今天给大家推荐三款效(mo)率(yu)工(shen)具(qi)! 一.听歌插件 1 功能 ...
- 原子操作&普通锁&读写锁
一:原子操作CAS(compare-and-swap) 原子操作分三步:读取addr的值,和old进行比较,如果相等,则将new赋值给*addr,他能保证这三步一起执行完成,叫原子操作也就是说它不能再 ...
- 史上最全office2016 激活码
现在office版本已经更新到2016了,现在给大家分享Office 2016 各个版本的激活码,记得断网激活哈.(本人使用的是家庭版) Office 2016 Pro Retail 版激活密钥: [ ...
- EF 查询视图出现重复数据
解决方案: 由多张表组成的视图,要加实体键.而且实体键组合要能确保唯一性. 个人理解:确保唯一性,一个或多个实体键,实现了复合主键或组合主键的效果. 这样查询是,延迟加载机制,才知道哪些需要重新从数据 ...
- [Java] 为什么字符串比较不能用两个等号（==）
Java中,使用"=="比较字符串时,判断的是两个字符串是否存放在相同的位置.如果两个字符串存放在相同的位置,那么它们就是相同的,使用"=="比较的结果也就是T ...
- SAP HUM 事务代码HUMO为整托做Scrap
SAP HUM 事务代码HUMO为整托做Scrap HUMO事务代码查询结果里,选择某个HU, 回车,过账成功, 2019-04-10 写于苏州市.