组件：参数验证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 ...
随机推荐
- 训练计划Day2
Day2:线段树(可持久化),平衡树(splay,treap),并查集,树链剖分,动态树,树状数组,点分治(可持久). 线段树模板 //区间最大,and,or #include <cstdio& ...
- 微软RPC官方教程
http://msdn.microsoft.com/en-us/library/windows/desktop/aa379010(v=vs.85).aspx 注意:原文版本较老,我更新和改变了部分内容 ...
- (3)mysql表和字段的操作
创建表 create table name( id int, student ) ); 查看表结构 ****常用**** describe 表名; 修改表名 老表 rename 新表 ALTER TA ...
- java 压缩包
package com.gome.budget.common.utils; import org.apache.commons.compress.archivers.ArchiveEntry; imp ...
- tensorflow识别验证码（1）-tensorflow安装，验证码生成
什么是TensorFlow? TensorFlow是Google开发的一款神经网络的Python外部的结构包, 也是一个采用数据流图来进行数值计算的开源软件库.TensorFlow 让我们可以先绘制 ...
- LoadRunner例子：检查点为参数的一个例子
LoadRunner例子:检查点为参数的一个例子 检查点是LoadRunner的一个功能,用来验证业务功能的正确性.如果检查的内容是变化的,脚本该如何写呢? 问题提出:LoadRunner订票网站例子 ...
- SoapUI测试接口【转】
下载安装soapUI工具,具体安装按照提示往下走就可以,这里不着重说明,下面是我打开soapUI工具的起始窗口: 在Projects上鼠标右键点击,选择new soap project(新建一个SO ...
- HTML - 表格标签相关
<html> <head></head> <body> <!-- table (表格) border : 表格的边框 width : 表格的宽 h ...
- 亲历者说：Kubernetes API 与 Operator，不为人知的开发者战争
如果我问你,如何把一个 etcd 集群部署在 Google Cloud 或者阿里云上,你一定会不假思索的给出答案:当然是用 etcd Operator! 实际上,几乎在一夜之间,Kubernetes ...
- 对比两个String无规律包含连续4个相同字符返回true的方法
package com.qif.dsa.util; import java.util.ArrayList; import java.util.List; /** * @author * @Title: ...