组件：参数验证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 ...
随机推荐
- java8 list、map遍历以及反射
//新建list List<User> userList = new ArrayList<>(); User user = new User(); user.setId(&qu ...
- 从零开始学习jQuery (六) jquery中的AJAX使用
本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即 ...
- 18.scrapy_maitian_analysis
1_info.py # encoding: utf-8 import pandas as pd # 租房 基本信息 # 读取文件 df=dataframe df = pd.read_json(&quo ...
- SWT图形用户界面之配置
1.在eclipse的plugins目录下找到org.eclipse.swt.win32.win32.x86_64_3.111.0.v20190605-1801.jar文件 其中3.111.0是ecl ...
- Pycharm VS VS Code(个人使用感受)
Pycharm IDE (community enough!) 简单介绍:Pycharn的确是我刚开始学习python时,除了Visual Studio之外,上手的第二个IDE,最初是因其好看的界面, ...
- C开发系列-数组
C语言数组 数组:用来存储一组数据. 计算C语言的数组长度 int age1 = 12; int age2 = 15; int age3 = 10; int age4 = 13; int ages[] ...
- react中使用屏保
1,默认路由路径为屏保组件 <HashRouter history={hashHistory}> <Switch> <Route exact path="/&q ...
- openSUSE 安装compass,mkmf.rb can't find,checking for ffi.h...extconf.rb failed
安装compass时,提示 Fetching: sass-.gem (%) Successfully installed sass- Fetching: ffi-.gem (%) Building n ...
- 深入理解Java虚拟机（程序编译与代码优化）
文章首发于微信公众号:BaronTalk,欢迎关注! 对于性能和效率的追求一直是程序开发中永恒不变的宗旨,除了我们自己在编码过程中要充分考虑代码的性能和效率,虚拟机在编译阶段也会对代码进行优化.本文就 ...
- Django项目在linux上运行
目录 前言 上传 解压 制作启动脚本 这是一篇关于如何在linux下,以后台进程的方式运行服务,命令改改基本上就通用了. 前言 我们在windows本地开发完Django项目后,需要把项目部署到lin ...