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 ...
随机推荐
- webpack2诸类事宜
写在最前:webpack的总结也是自己坑过,实践过但是也是针对性的使用,在加上webpack的背景,对于其‘原理’方面有很大的不正确的理解,有错误的地方,请尽情指出(乖巧~) 由于版本遇到的问题: 在 ...
- c# winForm DotNetBar控件之SuperGridControl
1.添加表头 sgc.PrimaryGrid.SelectionGranularity = SelectionGranularity.Row;//点击选中一行 DevComponents.DotNet ...
- 3-Windows-CMD启动mysql服务-连接本地mysql服务-连接远程mysql服务
转自: https://jingyan.baidu.com/article/84b4f565b77a5660f6da32d4.html 备注: 如果在连接远程mysql服务,无法连接时,可能是远程my ...
- nth_element函数
使用方法:nth_element(start, start+n, end) 使第n大元素处于第n位置(从0开始,其位置是下标为n的元素),并且比这个元素小的元素都排在这个元素之前,比这个元素大的元素都 ...
- 自学Oracle心得
基本术语: global name 全局数据库名 service name 服务名 SID 实例名 常用命令: 1. s ...
- 将时间 '2018-08-06T10:00:00.000Z' 格式转化为本地时间
参考:https://blog.csdn.net/sxf_123456/article/details/81582964 参考模板: from datetime import datetime, ti ...
- C#编程入门--MYSQLHELPER
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- DOM——事件详解
事件 事件:触发-响应机制 事件三要素 事件源:触发(被)事件的元素 事件名称: click 点击事件 事件处理程序:事件触发后要执行的代码(函数形式) 事件的基本使用 var box = docu ...
- 记一次为解决Python读取PDF文件的Shell操作
目录 一.背景 二.问题 三.解决 四.一顿分析及 Shell 操作 五.后续 一.背景 本想将 PDF 文件转换为 Word 文档,然后网上搜索了一下发现有挺多转换的软件.有的是免费的.收费,咱也不 ...
- NX二次开发-UFUN终止UF_terminate
在调用UFUN函数时必须加Uf.h头文件,代码开头和结尾加UF_initialize和UF_terminate NX9+VS2012 #include <uf.h> #include &l ...