vue组件参数校验
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子组件传值</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="root">
<child content="you"></child>
</div>
<script>
Vue.component('child',{
props:{
content:{
type:String,
validator:function(value) {
return (value.length>5)
}
}
},
template:'<div>{{content}}</div>'
});
var vm=new Vue({
el:'#root'
})
</script>
</body>
</html>
效果：
修改content的内容：
将
<child content="you "></child>
改为
<child content="helloworld"></child
>
效果：
这就是参数校验
vue组件参数校验的更多相关文章
- vue组件参数校验与非props特性
组件参数校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- 4-3 组件参数校验与非props特性
本文参考脚本之家,https://www.jb51.net/article/143466.htm 通过属性的形式,父组件对子组件进行参数的传递 //如下图: //父组件设置content属性,向属性中 ...
- vuejs组件参数校验
父组件向子组件传递一些参数,那么子组件有权对这些参数进行一个校验,这个就是组件参数校验 需求:父组件传递过来的必须是个字符串,这个要怎么去校验呢 <div id='root'> <c ...
- 深入理解 Vue 组件
深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...
- vue组件的基本知识点
1. 组件中 is 的特性: 有些 HTML 元素,诸如 <ul>.<ol>.<table> 和 <select>,对于哪些元素可以出现在其内部是有严格 ...
- vue组件学习(二)
父子组件之间的数据传递, 父传给子: 直接在组件上传,如:<count :number="2"> (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的 ...
- vue组件使用细节
ref 当ref写在一个标签元素中,通过this.$refs.name 获取的是标签对应的dom元素 <section id="app" ref="froggy&q ...
- 第四章、深入理解vue组件
4-1.使用组件的细节 a.使用is解决html出现bug 如下 table下面应该为tr,所以页面渲染的时候没有找到tr是有问题的,所以是有小bug,所以table中必须是tr b.改上面bug,t ...
- vue组件独享守卫钩子函数参数详解（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）
一样的和前面路由钩子类似的步骤 首先在demo下面的components下面新建一个test.vue组件 test组件代码 <template> <div class="t ...
随机推荐
- 2.执行计划（explain）分析
1.使用场景 获取执行计划命令:在select 命令前加上explain 或 desc explain select 或 desc select 1.语句执行之前 :防患于未然 2.出现慢语句时 :亡 ...
- python中函数的定义及调用
python中函数的定义及使用方法 1.函数的概念:函数是将具有独立功能的代码块组织为一个整体,使其具有特殊功能的代码集; 2.函数的作用:使用函数可以加强代码的复用性,提高程序编写的效率; 3.函数 ...
- FP-Tree -关联规则挖掘算法(转载)
在关联规则挖掘领域最经典的算法法是Apriori,其致命的缺点是需要多次扫描事务数据库.于是人们提出了各种裁剪(prune)数据集的方法以减少I/O开支 支持度和置信度 严格地说Apriori和FP- ...
- 高效IO之Java IO体系（一）
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680 个人觉得可以用“字节流操作类和字符流操作类组成了Java IO体系”来高度概括J ...
- Pandas重复值处理
import pandas as pd #生成数据 data1,data2,data3,data4=['a',3],['b',2],['a',3],['c',2] df=pd.DataFrame([d ...
- DNF邀请码开发再开发方案需求
一.原因分析: 1.现实原因:主播粉丝量级有限,一定规模粉丝注册消耗完后无法进 行之后合作 2.主播资源有限,能合作主播数量少 3.直播粉丝真实接近核心用户,但是不能将其有效转化为平台流水 ...
- 2019ICPC南京网络赛A The beautiful values of the palace
题意:蛇形填数超大版本,需要求出一些给定坐标的值的数位和,然后q次询问,一个矩形区域内值的和是多少 解题思路:二维偏序前缀和的经典题 二维偏序:求(x,y)左下角点的个数,思路是对x,y升序排序,用树 ...
- .net core 根据环境变量区分正式、测试 配置文件
新建测试.正式环境下所用的 配置信息文件 appsettings.Development.json 文件信息: { "Logging": { "LogLevel" ...
- 微信小程序开发系列之Hello World
第一步:注册 在微信公众平台官网首页,点击注册.(相关文档可以找到,这里不再累述,望见谅.) 微信小程序注册成功后界面 第二步:编辑器.开发工具 我们假定你已经申请注册好微信小程序了,我们选定一个代码 ...
- PHP之数据连接方法（二）
首先API接口,无非就是通过该程序去处理数据的数据,及判断数据的准确性. 因此我们需要一个DBTool的操作方法. DBTool地址:https://github.com/gfarmhuang/DBT ...