组件：参数验证props:组件参数验证语法
<!DOCTYPE html>
<html lang="zh"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="../css/style.css" rel="stylesheet"> </head>
<body>
<div id="myApp">
<h1>身世之谜</h1>
<show-member-info name="koma" :age="25" :detail="{address:'earth', language:'世界语'}"></show-member-info>
</div>
<script>
Vue.component('show-member-info', {
props: {
name: {
type: String,
required: true,
},
age: {
type: Number,
validator: function (value) {
return value >= 0 && value <= 130;
}
},
detail: {
type: Object,
default: function() {
return {
address: 'US',
language: 'English',
};
}
},
},
template: '<div>姓名：{{this.name}}<br/>'
+ '年龄：{{this.age}}岁<br/>'
+ '地址：{{this.detail.address}}<br/>'
+ '语言：{{this.detail.language}} </div>',
});
var myApp = new Vue({
el: '#myApp',
});
</script>
</body> </html>
组件：参数验证props:组件参数验证语法的更多相关文章
- VueJS组件之间通过props交互及验证
props 是父组件用来传递数据的一个自定义属性.父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop". 父组件通过props ...
- vue构造函数（根实例化时和组件实例对象选项）参数：选项详解
实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他 数据 data 属性能够响应数据变化,当这些数据改变时,视图会进行重渲染. 访问方式: 1.通过 vm.$ ...
- SpringBoot08 请求方式、参数获取注解、参数验证、前后台属性名不一致问题、自定义参数验证注解、BeanUtils的使用
1 请求方式 在定义一个Rest接口时通常会利用GET.POST.PUT.DELETE来实现数据的增删改查:这几种方式有的需要传递参数,后台开发人员必须对接收到的参数进行参数验证来确保程序的健壮性 1 ...
- 第二百一十一节，jQuery EasyUI，ValidateBox(验证框)组件
jQuery EasyUI,ValidateBox(验证框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 4.自定义验证 本节课重点了解 EasyUI 中 ValidateBox(验证框 ...
- 使用iview 的表单组件验证 Upload 组件
使用iview 的表单组件验证 Upload 组件 结果: 点击提交按钮, 没有填的form 项, 提示错误, 当填入数据后提示验证成功 代码: <template> <div id ...
- 组件基础（参数校验和动态组件、v-once）—Vue学习笔记
最最最后一点关于组件传值的问题. 提醒:本篇内容请使用Vue.js开发版!(附带完成的警告和提示) 1.组件的参数校验 父组件向子组件传值,子组件可以决定传值的一些限制. 比如,子组件指向接收Stri ...
- 041——VUE中组件之pros数据的多种验证机制实例详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...
- ValidateBox( 验证框) 组件
本节课重点了解 EasyUI 中 ValidateBox(验证框)组件的使用方法,这个组件依赖于Tooltip(提示框)组件. 一． 加载方式//class 加载方式<input id=&quo ...
随机推荐
- P2528 [SHOI2001]排序工作量之新任务
P2528 [SHOI2001]排序工作量之新任务 题目描述 假设我们将序列中第i件物品的参数定义为Ai,那么排序就是指将A1,…,An从小到大排序.若i<j且Ai>Aj,则<i ...
- LANMP相关配置
Linux Apache Mysql Postgresql 安装 yum -y install httpd yum -y install mysql mysql-server yum -y insta ...
- SpringCloud学习笔记（六）：Feign+Ribbon负载均衡
简介 官网解释: http://projects.spring.io/spring-cloud/spring-cloud.html#spring-cloud-feign Feign是一个声明式WebS ...
- System Verilog的概念以及与verilog的对比
以下内容源自:http://blog.csdn.net/gtatcs/article/details/8970489 SystemVerilog语言简介 SystemVerilog是一种硬件描述和验证 ...
- Java工具之NotePad++使用技巧
按住Alt键 拖动鼠标左键 批量添加 如,等 批量添加逗号, 下面, 竖排 变 横排 ctrl + f 使用正则表达式 \r\n 替换换行符 使用:sql语句中的 过滤条件 in中,往往适合范围查找 ...
- mac系统升级导致无法在iOS设备中运行Safari Web 调试器
macOS系统升级之后,可能会导致Safari开发选项中没有iOS设备,进而无法运行Safari Web 调试器. 此问题的解决办法: 请转到设置>常规>重置>重置位置和隐私.现在, ...
- pg总览
一.编译安装初始化等 ./configure --prefix=/release --with-openssl --without-ldap --with-libxml - -enable-threa ...
- barrel shifter, logarthmic shifter and funnel shifter
1,shifter小集合 (1) simple shift 左移或右移补0 (2) arthmetic shift 左移补0,右移补符号位 (3) barrel shifter 桶型,顾名思义,应该头 ...
- intrinsicContentSize和Content Hugging Priority
Mgen | 首页 | | 发新文章 | 联系 | 订阅 | 管理 iOS: 在代码中使用Autolayout (2) - intrinsicContentSize和Content Hugging ...
- 网络工程师课程---3、IP与路由器（ip地址的主要作用是什么）
网络工程师课程---3.IP与路由器(ip地址的主要作用是什么) 一.总结 一句话总结: 用来标识一个节点的网络地址 划分网段 1.如何得到ip地址的网段号? ip和子网掩码 化成二进制后取 与运算 ...