Vue.js组件props数据验证实现详解


Posted in Javascript onOctober 19, 2019

本文实例为大家分享了Vue.js组件props数据验证的具体代码,供大家参考,具体内容如下

数据验证

一般当组件需要提供给别人使用时,就需要使用数据验证。

示例:

<script>
  Vue.component('my-component',{
    props:{
      //必须是数字类型
      propA: Number,
      //必须是字符串或数字类型
      propB:[String, Number],
      //布尔值,如果没有定义,默认值就是true
      propC:{
        type: Boolean,
        default: true
      },
      //数字,而且是必选
      propD: {
        type: Number,
        required: true
      },
      //如果是数组或对象,默认值必须是一个函数来返回
      propE: {
        type: Array,
        default: function () {
          return {};
        }
      },
      //自定义验证函数
      propF: {
        viladator: function (value) {
          return value > 10;
        }
      }
    }
  });
</script>

验证的type类型可以是:

  • String
  • Number
  • Boolean
  • Object
  • Array
  • Function

type也可以是一个自定义构造器,使用instanceof检测。当prop验证失败时,开发版本下会在控制台抛出一条警告。

实例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <title>组件:参数验证</title>
</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>

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 #Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 #Javascript
JavaScript闭包相关知识解析
Oct 19 #Javascript
Vue.js组件通信之自定义事件详解
Oct 19 #Javascript
Vue.js自定义指令学习使用详解
Oct 19 #Javascript
Vue.js标签页组件使用方法详解
Oct 19 #Javascript
基于JavaScript获取base64图片大小
Oct 18 #Javascript
You might like
个人站长制做网页常用的php代码
2007/03/03 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
jQuery.each()用法分享
2012/07/31 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
Python 文件管理实例详解
2015/11/10 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
python算法题 链表反转详解
2019/07/02 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
查看keras的默认backend实现方式
2020/06/19 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
上海方立数码笔试题
2013/10/18 面试题
年终考核实施方案
2014/05/26 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
五年级小学生评语
2014/12/26 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android