没有合适的资源?快使用搜索试试~ 我知道了~
组件 Vue.js引入的组件,让分解单一HTML到独立组件成为可能。组件可以自定义元素形式使用,或者使用原生元素但是以is特性做扩展。 今天看了vuejs的组件,看到了prop组件,主要作用是在传入数据的时候对传入的值做判断,写了个小例子。 <div id=app> <my num=100 msg='sdf' object={a: cust=100 ></child> </div> [removed] Vue.component('my-child', {
资源推荐
资源详情
资源评论
VueJs组件组件prop验证简单介绍验证简单介绍
组件组件
Vue.js引入的组件,让分解单一HTML到独立组件成为可能。组件可以自定义元素形式使用,或者使用原生元素但是以is特性
做扩展。
今天看了vuejs的组件,看到了prop组件,主要作用是在传入数据的时候对传入的值做判断,写了个小例子。
<div id="app">
<my-child
:num="100"
:msg="'sdf'"
:object="{a:'a'}"
:cust="100"
></child>
</div>
<script type="text/javascript">
Vue.component('my-child', {
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
num: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
msg: {
type: String,
required: true
},
// 数字,有默认值
num1: {
type: Number,
default: 1000
},
// 数组/对象的默认值应当由一个工厂函数返回
object: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
cust: {
validator: function (value) {
return value > 10
}
}
},
template: `<div>
<p>{{ num }}</p>
<p>{{ msg }}</p>
<p>{{ num1 }}</p>
<p>{{ object }}</p>
<p>{{ cust }}</p>
</div>`
})
new Vue({
el: "#app"
});
</script>
输出结果
这里都是通过验证了的,能够全部输出来,而且控制台没有报错。
如果有不符合的,控制台会报错。
<div id="app">
<my-child
:num="asd"
:msg="sdf"
:object="{a:'a'}"
:cust="100"
></child>
</div>
对应的,也没有渲染出来
资源评论
weixin_38509656
- 粉丝: 7
- 资源: 909
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Screenshot_2024-05-21-17-06-42-64_2332cb9b27b851b548ba47a91682926c.jpg
- 毕业设计参考 - 基于树莓派、OpenCV及Python的人脸识别
- node-v18.20.2-linux-arm64
- 222222222222
- 16张相机标定图片,可复现本文畸变矫正
- dbeaver-ce-23.3.1-x86_64-setup.zip
- 基于X86 AVX2指令的快速卷积实现
- VMware-ESXi-7.0U3n-21930508-depot.zip文件
- MySQL 在 Windows 系统下的安装教程.zip
- Access文件数据库访问的客户端
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功