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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 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通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
js中this的指向问题归纳总结
2018/11/28 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
劳资员岗位职责
2013/11/11 职场文书
商业项目策划方案
2014/06/05 职场文书
重阳节座谈会主持词
2015/07/03 职场文书