vue props对象validator自定义函数实例

validator自定义函数实例

props: {
  // 基础的类型检查 (`null` 匹配任何类型)
  propA: Number,
  // 多个可能的类型
  propB: [String, Number],
  // 必填的字符串
  propC: {
   type: String,
   required: true
  },
  // 带有默认值的数字
  propD: {
   type: Number,
   default: 100
  },
  // 带有默认值的对象
  propE: {
   type: Object,
   // 对象或数组且一定会从一个工厂函数返回默认值
   default: function () {
    return { message: 'hello' }
   }
  },
  // 自定义验证函数
  propF: {
   type: String,
   validator: function (t) {
    // 这个值必须匹配下列字符串中的一个
    return t === 'fade' || t === 'slide'
   },
   defalut:'slide'
  }

以上这篇vue props对象validator自定义函数实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue表单验证插件Vue Validator使用方法详解

    Vue-validator 是Vue的表单验证插件,供大家参考,具体内容如下 Vue版本: 1.0.24 Vue-validator版本: 2.1.3 基本使用 <div id="app"> <validator name="validation"> <form novalidate> <div class="username-field"> <label for="username

  • 使用vue自定义指令开发表单验证插件validate.js

    这段时间在进行一个新项目的前期搭建,新项目框架采用vue-cli3和typescirpt搭建.因为项目比较轻量,所以基本没有使用额外的ui组件,有时候我们需要的一些基础组件我就直接自己开发了.今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程. 1.vue插件开发 关于vue的插件开发,官方文档里有很清晰的说明,详情可以去阅读开发文档.我自己开发的表单验证插件validate.ts和loading,messageBox插件都是利用了这种方式.今天先来看表单验

  • vue表单自定义校验规则介绍

    如下所示: <div id="app"> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"

  • vue props对象validator自定义函数实例

    validator自定义函数实例 props: { // 基础的类型检查 (`null` 匹配任何类型) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组且

  • Vue中util的工具函数实例详解

    Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示: // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => { fn.apply(context, args) }, wait) } } function flatten (arr)

  • antd vue table跨行合并单元格,并且自定义内容实例

    ant-design-vue版本:~1.3.8 需求:表格实现跨行合并,并且在合并完的单元格中显示图片 效果图: 源码: export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), varTable: { cloumns: [ { title: '置信度', dataIndex: 'confidence ', cla

  • vue 实现click同时传入事件对象和自定义参数

    vue 实现click同时传入事件对象和自定义参数

    仅仅传入自定义参数 HTML <div id="app"> <button @click="tm(123)">ddddd</button> </div> JS代码 new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e); } } }) 仅仅传入事件对象 HTML <div id="app"> <button @cl

  • vue修改对象的属性值后页面不重新渲染的实例

    最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="

  • JavaScript数组、json对象、eval()函数用法实例分析

    本文实例讲述了JavaScript数组.json对象.eval()函数用法.分享给大家供大家参考,具体如下: 一.JavaScript中的数组 数组使用[].new Array()或new Array(count)进行创建 创建数组之后我们可以对其静态初始化,也可以对其动态赋值 数组的常用属性:length 数组的常用方法:toString().join().reverse().push().pop() <script type="text/javascript"> //静

  • vue props 单项数据流实例分享

    父组件传递动态值showStoreList,子组件通过props接收,但是如果在子组件中直接使用并修改这个值会报错: 因为父级的更新会传递给子组件,但是反过来则不行: 这种情况下,可以使用computed或watch来获取props中的值 以上实例不难,下面由我们小编整理的补充内容: Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的

  • vue props 一次传多个值实例

    数组: <custom-element :whatever="[...array]"></custom-element> 对象: <custom-element :whatever="{...obj}"></custom-element> 或者: <custom-element v-bind="obj" </custom-element> 子组件: <ul class=&qu

  • 浅谈vue使用axios的回调函数中this不指向vue实例,为undefined

    今天在vue-cli脚手架搭建的项目中使用axios时,遇到无法解析this.$route的报错信息,最后发现是作用域的问题. 1.解决方法:使用 => 原代码: axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 修改为: axios.get('/u

  • C++函数对象详解附带实例

    如果一个类将()运算符重载为成员函数,这个类就称为函数对象类,这个类的对象就是函数对象.函数对象是一个对象,但是使用的形式看起来像函数调用,实际上也执行了函数调用,因而得名. 下面是一个函数对象的例子. #include <iostream> using namespace std; class CAverage { public: double operator()(int a1, int a2, int a3) { //重载()运算符 return (double)(a1 + a2 + a

随机推荐