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 ...
随机推荐
- MySQL 8.0及以上版本设置密码
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
- 为Python终端提供持久性历史记录
有没有办法告诉交互式Python shell在会话之间保留其执行命令的历史记录? 当会话正在运行时,在执行命令之后,我可以向上箭头并访问所述命令,我只是想知道是否有某种方法可以保存这些命令,直到下次我 ...
- oh my zsh 如何启用插件
注 根据自己的需求启用插件.但是,插件具体实现什么功能就得自己看啦. 官网说明 实践 其实默认oh my zsh(以下简称zsh)已经在安装的时候就帮我们下载好了所有插件,只不过需要用户自己选择启用哪 ...
- Vue之自建管理后台（三）登录页面
在做登录页面之前,我们必须得完成路由的设定... 按照之前的设计我们路由的文件夹是src/router 官方默认的index.js,如下: import Vue from 'vue' import R ...
- 枚举对象中的属性 for . . in
枚举对象中的属性:把对象中所有的属性和值都取出来 使用 for . . . in 语句 语法: for(var 变量 in 对象){ } for . . . in 语句 对象中有几个属性,循 ...
- spring mvc 配置后，web中的html页面报404,该怎么处理
问题描述: 在根目录webapp下的jsp页面可以通过url直接访问,而html页面就会报404错误. 解决方案1: 在spring-mvc.xml中添加如下配置: <!--将静态文件指定到某个 ...
- C# Func和匿名方法 简单使用
今天敲代码遇见一个问题,解决中用到了C#的Func和匿名方法,发现挺好用的 定义一个这样的方法可以避免重复写try catch 这里用到了Func<int,string> ,它其实就是一个 ...
- Comparable和Comparator接口是干什么的？列出它们的区别
Java提供了只包含一个compareTo()方法的Comparable接口.这个方法可以个给两个对象排序.具体来说,它返回负数,0,正数来表明输入对象小于,等于,大于已经存在的对象. Java提供了 ...
- LoadRunner模拟REST接口的json请求
LoadRunner模拟REST接口的json请求 现在很多手机应用的性能测试,REST接口调用通过json格式,在用loadrunner模拟这些json请求时,需要开发提供 1.供接口地址 2.提交 ...
- Linux基本使用命令
一.常用命令归纳分类 课外网站 http://man.linuxde.net/ http://www.jb51.net/linux/ http ...