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 ...
随机推荐
- Serializable 和Parcelable 详解
序列化:为了保存在内存中的各种对象的状态,并可以把保存的对象的状态读出来 安卓中实现序列化的接口有两个,一个是serializable,一个是parcelable. 一.实现序列化: 1.是可以将对象 ...
- kafka单机版的安装、集群部署 及使用
1.安装kafka(单机版) 1.1上传 kafka_2.11-2.0.0.tgz 到 /root/Downloads 1.2解压 tar 包 tar -zxvf kafka_2.11-2.0.0.t ...
- eduCF#61 C. Painting the Fence /// DP 选取k段能覆盖的格数
题目大意: 给定n m 接下来给定m个在n范围内的段的左右端 l r 求选取m-2段 最多能覆盖多少格 #include <bits/stdc++.h> using namespace s ...
- Centos下的 docker安装
安装一些必要的系统工具:sudo yum install -y yum-utils device-mapper-persistent-data lvm2 添加软件源信息:sudo yum-config ...
- 22-5-join
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- BOM的构成
1.DOM 和 BOM 的区别 DOM:文档对象模型,把[文档]当做一个[对象]来看待,DOM的顶级对象是document 主要学习的是操作页面元素,DOM 是 W3C 的标准规范 BOM:浏览器对象 ...
- Flask理论基础（一）加载配置文件
一.修改/新增配置项 1.使用配置文件 app.config.from_pyfile("config.cfg") 如上 config.cfg 可以是任意后缀的文本文件,需要与app ...
- 2019-9-11-.NET-Standard
title author date CreateTime categories .NET Standard lindexi 2019-9-11 9:0:29 +0800 2019-9-11 9:0:2 ...
- scip 练习2.18
(define (append a b ) (if (null? a )b (cons (car a) (append (cdr a) b)))) (define (reverse l) (appen ...
- 发现一个新的远程软件 gotohttp
之前直到远程桌面连接是TeamViewer 替换的原因是: 被控制端版本 11.0.x (很久以前安装的),而我本地的Teamviewer是 14.x, 去连接,好像提示被控制端的版本太低:本地使用 ...