Vue 数据校验

使用 插件 和 mixin进行数据校验

  • 使用mixin 进行数据校验
<script>// plugin 插件  数据校验// 创建 vue实例const app = Vue.createApp({data() {return{name:'dell',age: 28}},methods: {handleClick() {this.show = !this.show;}},// 数据校验 agerules: {age: {validate: age => {return age > 25},message: '太年轻了'},name: {validate: name => {return name.length > 4},message: '名字太短了'}},template:  `<div>{{name}}{{age}}</div>`});// 使用mixin 进行数据校验app.mixin({created() {for (let key in this.$options.rules) {const item = this.$options.rules[key];this.$watch(key, (value)=> {const result = item.validate(value);if (!result) console.log(item.message);}) }}})const vm = app.mount('#root');</script>

使用 插件+ mixin进行数据校验

<script>// plugin 插件  数据校验// 创建 vue实例const app = Vue.createApp({data() {return{name:'dell',age: 28}},// 数据校验 agerules: {age: {validate: age => {return age > 25},message: '太年轻了'},name: {validate: name => {return name.length > 4},message: '名字太短了'}},template:  `<div>{{name}}{{age}}</div>`});// 使用插件进行数据校验const validatorPlugin = {install (app, options) {// 使用mixin 进行数据校验app.mixin({created() {for (let key in this.$options.rules) {const item = this.$options.rules[key];this.$watch(key, (value)=> {const result = item.validate(value);if (!result) console.log(item.message);}) }}})}}// 使用插件app.use(validatorPlugin);const vm = app.mount('#root');</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/9078.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7个AI驱动的3D模型生成器

老子云AI生成3D模型https://www.laozicloud.com/aiModel 在快速发展的技术世界中&#xff0c;人工智能 (AI) 已经改变了游戏规则&#xff0c;尤其是在 3D 对象生成领域。 AI 驱动的 3D 对象生成器彻底改变了我们创建和可视化 3D 模型的方式&#xff0c;使该过程更加高效、准确…

Star-CCM+通过将所有部件创建一个区域的方式分配至区域后子区域的分离,子区域材料属性的赋值,以及物理连续体的创建方法介绍

前言 上次介绍了将零部件分配至区域的方法与各个方法之间的区别&#xff0c;本文将继续上次的讲解&#xff0c;将其中的“将所有部件分配至一个区域”的应用进行补充。 如下图所示&#xff0c;按照将所有部件创建一个区域的方式分配至区域后&#xff0c;在区域下就会有一个区域…

toB、toC、toD、B2B、C2C、O2O、B2C、P2P到底是什么?

toB、toC、toD到底是什么&#xff1f; toB&#xff08;Business&#xff09;&#xff1a;面向企业用户&#xff0c;例如OA办公系统 toC&#xff08;Consumer&#xff09;&#xff1a;主要是面向个人、客户&#xff0c;例如王者荣耀 toD&#xff08;Developer&#xff09;&…

WPF中ObservableCollection

在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;ObservableCollection<T> 是一个非常重要的类&#xff0c;它用于实现动态数据绑定功能。这个类位于 System.Collections.ObjectModel 命名空间中&#xff0c;是 ICollection<T>, IList…

初识微前端

微前端&#xff1a;微前端是一种软件架构模式&#xff0c;旨在解决大型前端应用程序开发和维护中的复杂性问题。它将前端应用程序拆分成更小的、独立的部分&#xff0c;每个部分可以由不同的团队开发、测试、部署和维护。这些独立的部分可以是单独的应用程序或者功能模块&#…

java:遍历目录文件

/*** 通过递归遍历目录下的所有内容&#xff0c;并把所有文件的绝对路径输出在控制台** 思路&#xff1a;* 1.根据给定的路径创建一个File对象* 2.定义一个方法&#xff0c;用于获取给定目录下所有内容&#xff0c;参数为第一步创建的file对象* 3.获取给定的File目录下的文件或…

若依集成mybatis-plus 超详细教程(亲测可用)

文章目录 简介步骤第一步第二步第三步第四步第五步第六步 使用QueryWrapperservice层impl 实现接口类层Mapper层 简介 话不多说 直接跟着下面的教程操作&#xff0c;如果有报错私信我&#xff0c;或者通过博文下面的微信名片加我微信&#xff0c;免费解答哦&#xff01; 步骤 …

代码随想录Day 42|Leetcode|Python|121. 买卖股票的最佳时机 ● 122.买卖股票的最佳时机II

121. 买卖股票的最佳时机 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从…

如何处理Django项目中表数据的排序问题

如何处理Django项目中表数据的按时间排序问题 当我们在写一些项目如购物平台 , 图书管理系统等都会不可避免的遇到排序问题 , 因为作者正在完成一个购物系统的项目 , 所以该文就以电商购物系统来举例说明 在utils文件夹中新建一个modle.py文件 , – utils文件夹主要存放一些非…

opencv图片的旋转-------c++

图片的旋转 /// <summary> /// 图片的旋转 /// </summary> /// <param name"img"></param> /// <param name"angle">旋转角度:正数&#xff0c;则表示逆时针旋转;负数&#xff0c;则表示顺时针旋转</param> /// <…

【吊打面试官系列】Java高并发篇 - 什么是线程调度器(Thread Scheduler)和时间分片(TimeSlicing )?

大家好&#xff0c;我是锋哥。今天分享关于 【什么是线程调度器(Thread Scheduler)和时间分片(TimeSlicing )&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; 什么是线程调度器(Thread Scheduler)和时间分片(TimeSlicing )&#xff1f; 线程调度器是一个操作系统…

深入理解nginx中的signal处理机制

1. 引言 在计算机系统中&#xff0c;信号处理是一项重要的任务&#xff0c;它允许操作系统和应用程序之间进行通信和协调。在网络服务器软件中&#xff0c;如Nginx&#xff0c;信号处理机制起着关键作用&#xff0c;它能够捕获和处理各种类型的信号&#xff0c;从而实现服务器的…

2024中国植物资源化妆品创新展在国家植物园成功举办

2024中国植物资源化妆品创新展&#xff08;简称国植美妆展&#xff09;于今年05月06日在北京国家植物园圆满落下帷幕。国植美妆展由中国广告协会化妆品工作委员会与中国抗衰老促进会化妆品产业分会指导&#xff0c;北京华晟德观文化科技发展有限公司主办&#xff0c;于03月30日…

安卓模拟器访问主机局域网

误打误撞能够访问主机局域网了 但是不太懂是因为哪一部分成功的 先记录一下 PC&#xff1a;mac系统 安卓编译器&#xff1a;Android Studio 步骤 只需要在PC上进行设置 1. 在【设置】中&#xff0c;打开已连接的Wi-Fi的【详细信息】 2. TCP/IP --> 配置IPv6&#xff0c;修…

前端组件库之ant-design-vue

在这里记录一个这个组件库我之前没有发现最近才发现的一个很好用的功能&#xff08;应该叫功能吧&#xff1f;&#xff09; 就是 这个flex弹性布局&#xff0c;之前在开发时&#xff0c;一直使用elementUI,是第一次使用这个组件库&#xff0c;所以没有发现这个功能这么好用 你…

第21天 反射

反射概述 想象一下&#xff0c;你在一个房间里边&#xff0c;但你看不见自己&#xff0c;也不知道自己是谁。这时候你面前有一个镜子&#xff0c;你可以通过镜子的反射来观察自己。反射就像这面镜子。它让你能够检查、分析、修改Java中的对象、类、方法等 使用情况&#xff1…

WPF控件之StackPanel布局控件

StackPanel别名堆栈panel 使其子元素按照一定方式进行布局&#xff0c;子元素排布方式要么设置为水平排布&#xff0c;要么垂直排布。 属性 Orientation设置排列方式(默认的是垂直排布) : Horizontal水平排布 Vertical 垂直排布 实例 <StackPanel Orientation"Vert…

视频号小店怎么做?店铺运营详细步骤讲解,全网独家

大家好&#xff0c;我是电商笨笨熊 视频号小店作为今年的电商黑马&#xff0c;下一个站在风口的项目&#xff0c;自是吸引了不少的玩家&#xff1b; 先不说视频号自身庞大的流量体系&#xff0c;单单是高客单的市场就值得尝试一把&#xff1b; 且当前视频号小店刚刚推出不久…

智慧文旅赋能旅游服务升级:以科技创新驱动行业变革,打造智慧化、个性化、高效化的旅游新体验,满足游客日益增长的多元化需求

目录 一、引言 二、智慧文旅的概念与内涵 三、智慧文旅在旅游服务升级中的应用 1、智慧旅游服务平台建设 2、智慧景区管理 3、智慧旅游营销 四、智慧文旅推动旅游行业变革的案例分析 案例一&#xff1a;某智慧旅游城市建设项目 案例二&#xff1a;某景区智慧化改造项目…

SpringBoot如何实现动态数据源?

在Spring Boot中实现动态数据源主要涉及到创建和管理不同的数据源&#xff0c;并在运行时根据需要切换。这可以通过编程方式配置Spring的AbstractRoutingDataSource来完成。下面我会逐步介绍如何实现动态数据源&#xff0c;并给出代码示例。 第1步&#xff1a;添加依赖 首先&…