组件：参数验证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 ...
随机推荐
- 尚学python课程---13、python基础语法
尚学python课程---13.python基础语法 一.总结 一句话总结: legend2系统使我能够快速掌握一门语法,特别有用 pass 语句:空语句:是为了保持程序结构的完整性 :作用:比如: ...
- sql还原数据库时候改变数据库名
需求:在做图书馆数据整合时候,由于有两个校区,用的是分离开的同一个数据库,数据库名字都一样的,现在我要整合在一起,我的想法是把两个数据库先还原到我本地,用写好的脚本整合到一起.所以,我还原两个数据库时 ...
- 如何上传文件到git
具体有三大步骤: 一.创建新的仓库 二.本地仓库 三.git命令上传(需要下载git) 一.创建新的仓库 二.本地仓库 其实这个本地仓库就是文件的所在地,在哪都可以 三.git命令上传(需要下载g ...
- CCPC 2019 网络赛 HDU huntian oy （杜教筛）
1005 huntian oy (HDU 6706) 题意: 令,有T次询问,求 f(n, a, b). 其中 T = 10^4,1 <= n,a,b <= 1e9,保证每次 a,b互质. ...
- [kuangbin带你飞]专题一 简单搜索 - D - Fliptile
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...
- Censored! POJ - 1625 AC自动机+大数DP
题意: 给出一n种字符的字典,有p个禁用的单词, 问能组成多少个不同的长度为m的合法字符串.(m<=50) 题解: 是不是个我们之前做的题目非常非常像,题意都一样. 直接将上次写的AC自动机+矩 ...
- Eclipse 连接MySql数据库总结
Eclipse 连接MySql数据库总结 一.在MySql中创建数据库,并创建表,向表中插入数据 1.创建数据库 create database select_test 2.创建表 create ta ...
- BZOJ1096 [ZJOI2007]仓库建设——斜率优化
方程: $\Large f(i)=min(f(j)+\sum\limits_{k=j+1}^{i}(x_i-x_k)*p_k)+c_i$ 显然这样的方程复杂度为$O(n^3)$极限爆炸,所以我们要换一 ...
- 使用vue-cli3快速适配H5项目
跟我老大学到了一招使用vue-cli3快速适配H5项目的方法. 我之前也有进行一个版本的适配,直接使用cnpm install -g vue-cli,然后安装各种插件进行适配,见我之前的博客. 后来老 ...
- 异或前缀和，组合数学——cf1054D
/* 每个异或前缀和sum[i]只有两个值 区间异或和不为0,即两个不相等的前缀和 sum[i]的两个前缀和只要标记一个就可以了,为了去重只用map保存最小的那个来计数 最后统计相同的前缀和时,为了使 ...