组件：参数验证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 ...
随机推荐
- (36)C# COM交互
调用DLL [DllImport("standerMFC.dll")] public static extern int PReadUID(ref HHFC_SET stru); ...
- 数据库连接JDBC
#=======================mysql============================= #jdbc.driverClassName=com.mysql.jdbc.Driv ...
- map 与 lambda 的用法
# 列表中的每个元素进行*2lis = [10, 30, 70]f = map(lambda li: li*2, lis) # 操作lis中的每个元素.print(list(f)) # 返回来一个新的 ...
- MySQL 调优/优化的 101 个建议！
原文:http://www.monitis.com/blog/101-tips-to-mysql-tuning-and-optimization/ MySQL是一个强大的开源数据库.随着MySQL上的 ...
- vue组件间通信用例
父组件传值给子组件 -- 以封装公用slide组件为例 父组件 <template> <section class="banner"> <slide ...
- java_JDK8中新增的时间API
java.time 包含值对象的基础包 java.time.chrono 提供对不同的日历系统的访问 java.time.format 格式化和解析时间的日期 java.time.temporal 包 ...
- Netstat- Linux必学的60个命令
1.作用 检查整个Linux网络状态. 2.格式 netstat [-acCeFghilMnNoprstuvVwx][-A][--ip] 3.主要参数 -a--all:显示所有连线中的Socket. ...
- thinkphp3.2.3 nginx 连接mysql 报错 new PDO 异常
在 php.ini 里重新指定mysql.sock 路径 pdo_mysql.default_socket=/Applications/XAMPP/xamppfiles/var/mysql/mysql ...
- apache反向代理和监听多个端口设置
修改apache配置文件httpd.conf 一.监听多个端口 在Listen 80后添加监听端口,如 Listen 80 Listen 8080 Listen 8008 二.反向代理设置 1.取消一 ...
- git安装与上传
git安装与上传 上一篇 / 下一篇 2017-03-10 10:09:42 / 个人分类:代码管理工具 查看( 63 ) / 评论( 0 ) / 评分( 0 / 0 ) 1.安装Git-2.11. ...