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 ...
随机推荐
- 3-vim-打开和新建文件-02-删除交换文件
vim的异常处理 如果vim异常退出,在磁盘上可能会保存有交换文件. 若使用vi编辑该文件时看到如下图信息,按下字母d就可以删除交换文件. 注意:输入命令操作的时候关闭输入法.
- pytest--fixture之参数化
场景:测试用例执行时,有的用例需要登陆才能执行,有些用例 不需要登陆.setup和teardown无法满足.fixture可以.默认 scope(范围)function • 步骤: 1. 导入pyte ...
- springMvc框架之Restful风格
method: @Controller @RequestMapping("/test") public String MyController{ @RequestMapping(& ...
- 结对编程UI
GitHub:https://github.com/zsl1996/UI/commits/master 一. 实验内容 这是交付给最终用户的软件,有一定的界面和必要的辅助功能.完 ...
- 检测apache状态，当apache处于非running状态如何脚本启动
编写脚本内容 #!/bin/bashURL="http://127.0.0.1/"curlit(){curl --connect-timeout 15 --max-time 20 ...
- day04 mysql单表查询 多表查询 pymysql的使用
day04 mysql pymysql 一.单表查询 1.having过滤 一般用作二次筛选 也可以用作一次筛选(残缺的: 只能筛选select里面 ...
- 47. List中特有的方法
集合的体系:--------------| Collection 单列集合的根接口----------| List 如果实现了List接口的集合类,该类具备的特点是:有序,可重复---------- ...
- JS实现菜单滚动到一定高度后固定
在有些网页中我们会发现会有这样的现象:某个div会随着屏幕的滚动达到一定高度的时候位置就固定下来了.例如一下导航条: 那么这里就需要用到JS的逻辑方法来实现了. html <div id=&qu ...
- wordpress非弹窗表单多文件上传插件
插件名:Drag and Drop Multiple File Upload - Contact Form 7 (ps:如果是弹窗表单,不要使用这个插件Drag and Drop Multiple F ...
- 【基础】Hint控制语句执行
mysql常用的hint对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的hint功能.下面介绍一些常用的. ...