百度360必应搜狗淘宝本站头条
0xalinux查看python版本信息python怎么改成中文python安装opencv库1到10的阶乘之和是多少
当前位置：网站首页 > 技术文章 > 正文

你可能没用过的v-model 时定制 prop 和 event

itomcoil 2025-01-14 14:21 10 浏览

大家可能在使用vue的时候已经很熟悉v-model指令了，但是有定制过prop和event吗？下面咱们来简单的说一说。

vue允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

下面通过src引入vue.js文件的方式来简单实现一下：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>v-model</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<div id="app">

<my-input v-model="isChecked" value="some value">喜欢学习vue</my-input>

</div>

</body>

</html>

<script src="./vue.js"></script>

<script>

Vue.component('my-input', {

template: `<div>

<input type="checkbox" :checked="check" @change="$emit('change',$event.target.checked)">

<slot></slot>

</div>`,

model: {

prop: 'check',

event: 'change'

},

props: {

value: String,

check: 0 // isChecked的值会传递给model指定prop 'check'

}

})

var app = new Vue({

el: '#app',

data: {

isChecked: 0

},

watch: {

isChecked: function(val) {

console.log('val', val); // 选中/取消选中checkbox会改变isChecked的值

}

}

})

</script>

通过手动选中/取消选中checkbox会触发watch监听，从而不断打印isChecked的当前值。也可以在F12控制台通过给app.isChecked = true/false，来查看checkbox选中和取消选中的效果。至此一个定制prop和event的示例已经完成~~~

最后给大家准备了一些前端资料分享给大家，如图~

恳请大家帮忙转发，然后关注走一走，私信我给大家发送资料链接~非常感谢~

相关推荐

MySql安装与使用

介绍mysql是目前最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的RDBMS(RelationalDatabaseManagementSystem：关系数据库管理系统)应用软件...

使用AI来搭建一个用户系统，步骤应该是怎样的呢?

我给AI的第一个问题是这样的：创建一个java21+springboot3.4+mysql21的一个用户系统，需要使用JWT，支持多语言，使用swagger，这个用户系统都应该包含哪...

Mysql 8.4数据库安装、新建用户和数据库、表单

1、下载MySQL数据库yuminstall-ywgetperlnet-toolslibtirpc#安装wget和perl、net-tools、libtirpcwgethtt...

介绍如何在 MySQL 中创建新用户并授予权限?

MySQL是一个开源的关系型数据库管理系统，常用于存储和管理大量的结构化数据。在使用MySQL进行数据管理时，为了安全和方便管理，通常需要创建新用户并授予相应的权限。本文将介绍如何在MySQL...

Mysql创建用户和权限管理

MySQL是一个多用户的数据库，最高权限管理者是root用户，它拥有着最高的权限操作。包括select、update、delete、update、grant等操作。如果有其他用户想使用MySQL，那么...

Mysql:创建用户详解

1、创建并授权用户--创建可从任何主机连接的用户CREATEUSER'myuser'@'%'IDENTIFIEDBY'mypassword'...

Python 实现【字符匹配】

defis_match(s,pattern):m,n=len(s),len(pattern)dp=[[False]*(n+1)for_inrange...

Python自动化:openpyxl工作簿、工作表相关操作

新建工作簿、工作表importopenpyxl#创建空白工作簿,会自动生成一个工作表：Sheetwb=openpyxl.Workbook()#新建工作表#create_sheet...

python每日一练之三数排序

概述今天主要分享一个三树排序的实例，大家可以自己测试玩一下~需求输入三个整数x,y,z，请把这三个数由小到大输出。方法一：如果是要练练手就随便找个排序算法实现一下#usr/bin/python#...

Python输出语句print()

Python中的输出语句主要通过内置函数print()实现，它可以灵活输出文本、变量、表达式结果等内容到控制台或其他文件。以下是详细介绍及示例：一、print()基本语法print(*object...

Python设置excel表格格式，这3个属性6个模块，要表格好看

前言：通过前面两篇文章，我们用Python处理excel数据得到了结果并保存了文件。打开文件会发现，文件里表格是没有设置格式的，还需手动调整行高列宽等样式，很麻烦。其实，通过Python库模块，能轻松...

python入门-day5-循环语句

以下是为“Day5:循环语句”设计的详细学习任务计划。这个任务旨在帮助初学者掌握Python中的循环语句（for和while），并通过实践理解它们的应用场景。Day5:循环语句学习目标...

Python基础编程必备!涵盖常见语法与操作的代码示例合集

以下是一份Python基础代码示例合集，涵盖了常见的语法和操作，适合初学者快速掌握基本编程概念：1.基础语法python#打印输出print("Hello,World!")#变...

Python循环语句实用教程

一、循环基础1.while循环基本语法：while条件表达式:循环体代码while循环流程图：应用示例：#简单计数器count=0whilecount<5:...

在 Python 中如何向一个已排序的数组(列表) 中插入一个数呢

在Python中如何向一个已排序的数组（列表）中插入一个数呢？方法有很多种，关键在于原来数组是什么样的排序，用到啥排序方法效率高，就用哪种。我们来练习其中的几种插入方法，另外也掌握下遍历数组的...

一周热门
最近发表
标签列表