安装Element-Plus与v-model在vue3组件中的使用

安装Element-Plus

1.安装Element-Plus

# 选择一个你喜欢的包管理器# NPM
npm install element-plus --save# Yarn
yarn add element-plus# pnpm
pnpm install element-plus

2.main.ts中导入

import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)app.use(createPinia())
app.use(router)
app.use(ElementPlus)app.mount('#app')

  在 tsconfig.json 中

// tsconfig.json
{"compilerOptions": {// ..."types": ["element-plus/global"]}
}

 

v-model在vue3组件中的使用

1.v-model在输入框中的使用

 <div style="padding: 20px;background-color: gray;"><!-- 1. v-model在输入框中的使用 --><!-- 等价于 :value + @input --><!-- <input type="text" v-model="phone"> --><input type="text" :value="phone" @input="dealInput"></div>

2.v-model在单选和多选标签上

 <!-- 2.v-model在单选和多选标签上 等价于 :checked + @change --><div style="padding: 20px;background-color: gray; margin-top: 20px;"><span>性别:</span><!-- <input v-model="gender" name="gender" value="男" type="radio">男<input v-model="gender" name="gender" value="女" type="radio">女 --><input name="gender" value="男" :checked="gender === '男'" type="radio" @change="changeGender">男<input name="gender" value="女" :checked="gender === '女'" type="radio" @change="changeGender">女</div><!-- 3. v-model在多选标签上 等价于 :checked + @change --><div style="padding: 20px;background-color: gray; margin-top: 20px;"><span>爱好:</span><input v-model="hobbies" name="hobby" type="checkbox" value="看书">看书<input v-model="hobbies" name="hobby" type="checkbox" value="打球">打球<input v-model="hobbies" name="hobby" type="checkbox" value="爬山">爬山<div>用户的爱好是: {{ hobbies }}</div></div>

3. v-model在下拉框中选择

<!-- 4. v-model在下拉框中选择 --><div style="padding: 20px;background-color: gray; margin-top: 20px;"><span>选择喜欢的城市:</span><select name="city" v-model="city"><option value="北京">北京</option><option value="南京">南京</option><option value="东京">东京</option><option value="上京">上京</option></select><div>用户喜欢的城市是: {{ city }}</div></div>

4. v-model在自定义组件上的使用

父组件:

<script setup lang="ts">
import ChildOne from '@/components/ChildOne.vue';
import { ref } from 'vue';const money = ref(100);
const car = ref('自行车');</script><template><div class="father">父组件-钱包:{{ money }}车辆:{{ car }}<!-- <ChildOne :model-value="money" @update:modelValue="money += $event" /> --><ChildOne v-model="money" v-model:car="car" /></div></template><style scoped>
.father {width: 600px;height: 600px;background-color: orange;
}
</style>

子组件:

<script setup lang="ts">defineProps<{modelValue: number,car: string
}>()const emits = defineEmits<{(e: 'update:modelValue', money: number): void,(e: 'update:car', car: string): void
}>()</script><template><div class="child-one"><div>子组件</div><p> 钱包: {{ modelValue }} </p><button @click="emits('update:modelValue', modelValue + 100)">搬砖一个月</button><button @click="emits('update:car', 'su7')">换车</button></div>
</template><style scoped>
.child-one {width: 200px;height: 200px;background-color: pink;
}
</style>

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

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

相关文章

Liunx:文件fd、重定向、管道

文件fd&#xff1a; 操作系统运行中一定存在着许多被打开的文件&#xff0c;这些文件需要被管理。一个进程会打开若干个文件。一个文件如果在操作系统中被打开&#xff0c;那么必须给该文件创建一个文件对象&#xff0c;包含被打开文件的各种属性。那么进程与文件的关系就变成…

如何产看SQL 查询的执行时间

要查看 SQL 查询的执行时间&#xff0c;尤其是毫秒级别&#xff0c;可以使用以下几种方法&#xff1a; 方法 1&#xff1a;使用 SET STATISTICS TIME 查看执行时间 SET STATISTICS TIME 会显示执行时间的详细信息&#xff0c;包括 CPU 时间和总耗时。启用后&#xff0c;SQL S…

linux笔记(DNS)

一、概念 DNS&#xff08;Domain Name System&#xff09;DNS 是一种分布式网络目录服务&#xff0c;主要用于将人类易于记忆的域名&#xff08;如 www.example.com&#xff09;转换为计算机可识别的 IP 地址&#xff08;如 192.168.1.1&#xff09;。它就像是互联网的电话簿&a…

Power Pivot、Power BI 和 SQL Server Analysis Services 的公式语言:DAX(数据分析表达式)

DAX&#xff08;Data Analysis Expressions&#xff09;是一种用于 Power Pivot、Power BI 和 SQL Server Analysis Services 的公式语言&#xff0c;旨在帮助用户进行数据建模和复杂计算。DAX 的设计初衷是使数据分析变得简单而高效&#xff0c;特别是在处理数据模型中的表关系…

优衣库在淘宝平台的全方位竞品分析与店铺表现研究:市场定位与竞争策略透视

优衣库品牌在淘宝平台的全方位竞品与店铺表现分析 一、品牌商品分析 1.商品列表与分类分析&#xff08;数据来源&#xff1a;关键词商品搜索接口&#xff1b;获取时间&#xff1a;2024.08.30&#xff09; 商品类别分布柱状图&#xff1a; 根据关键词商品搜索接口获取到的优衣…

设计模式-七个基本原则之一-里氏替换原则

里氏替换原则&#xff08;LSP&#xff09;面向对象六个基本原则之一 子类与父类的替代性&#xff1a;子类应当能够替代父类出现的任何地方&#xff0c;且表现出相同的行为。行为的一致性&#xff1a;子类的行为必须与父类保持一致&#xff0c;包括输入和输出、异常处理等。接口…

开源数据库 - mysql - innodb源码阅读 - master线程(一)

master struct /** The master thread controlling the server. */void srv_master_thread() {DBUG_TRACE;srv_slot_t *slot; // 槽位THD *thd create_internal_thd(); // 创建内部线程ut_ad(!srv_read_only_mode); //断言 srv_read_only_mode 为 falsesrv_main_thread_proce…

RocketMQ 自动注入消费者

目录 前言一、情景介绍二、问题分析三、代码实现 前言 之前接到一个需求&#xff0c;我们项目的技术负责人希望通过配置的形式&#xff0c;在项目启动的时候自动根据配置生成对应的消费者 觉得还有点意思&#xff0c;随即记录一下~ 一、情景介绍 比如我这里有一个消费者 Mes…

数据结构(C语言版)(第2版) 课后习题答案 李冬梅

数据结构(C语言版)(第2版) 第1章 绪论 1.简述下列概念:数据、数据元素、数据项、数据对象、数据结构、逻辑结构、存储结构、抽象数据类型。 答案: 数据:是客观事物的符号表示,指所有能输入到计算机中并被计算机程序处理的符号的总称。如数学计算中用到的整数和实数…

Vue 自定义icon组件封装SVG图标

通过自定义子组件CustomIcon.vue使用SVG图标&#xff0c;相比iconfont下载文件、重新替换更节省时间。 子组件包括&#xff1a; 1. Icons.vue 存放所有SVG图标的path 2. CustomIcon.vue 通过icon的id索引对应的图标 使用的时候需要将 <Icons></Icons> 引到使用的…

吴恩达深度学习笔记:卷积神经网络(Foundations of Convolutional Neural Networks)4.9-4.10

目录 第四门课 卷积神经网络&#xff08;Convolutional Neural Networks&#xff09;第四周 特殊应用&#xff1a;人脸识别和神经风格转换&#xff08;Special applications: Face recognition &Neural style transfer&#xff09;4.9 内容代价函数&#xff08;Content cos…

LeetCode46. 全排列(2024秋季每日一题 57)

给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 示例 2&#xff1a; 输入&#xff1a;nums …

界面控件DevExpress WPF中文教程:Data Grid——卡片视图设置

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

MySQL 数据表常用编码类型解析

文章目录 MySQL 数据表常用编码类型解析一、字符集与编码简介二、MySQL 中的常用编码类型1. ASCII 编码2. Latin1 编码3. UTF-8 编码4. UTF-8mb4 编码5. UTF-16 编码 三、如何选择合适的编码类型四、编码转换和兼容性问题五、总结 MySQL 数据表常用编码类型解析 在 MySQL 数据库…

LLM训练”中的“分布式训练并行技术;分布式训练并行技术

目录 “LLM训练”中的“分布式训练并行技术” 分布式训练并行技术 数据并行 流水线并行:按阶段(stage)进行切分 张量并行 序列并行 多维混合并行 自动并行 MOE并行 重要的分布式AI框架 “LLM训练”中的“分布式训练并行技术” 随着深度学习技术的不断发展,特别是…

Ubuntu开启FTP与SSH服务

在配置开发环境时&#xff0c;这两个配置感觉是最有用的&#xff0c;开启FTP服务可以将远程linux上的文件映射到Windows上&#xff0c;不管是使用虚拟机还是嵌入式linux设备&#xff0c;特别在开发写代码的时候&#xff0c;映射到Windows上使用VS code打开编写比在linux上编写舒…

虚拟现实技术及其在教育领域的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 虚拟现实技术及其在教育领域的应用 虚拟现实技术及其在教育领域的应用 虚拟现实技术及其在教育领域的应用 引言 虚拟现实技术概述…

搜维尔科技:Varjo XR-4在教育科研领域应用

医学教育与培训&#xff1a; • 解剖学教学&#xff1a;传统的解剖学教学依赖于教科书、图片或实体标本&#xff0c;学生对于人体结构的空间关系理解存在一定难度。而使用Varjo头显&#xff0c;学生可以沉浸在虚拟的人体解剖环境中&#xff0c;全方位、多角度地观察人体的各个…

Java 源码中的 Unicode 逃逸问题,别被注释给骗了

背景 看了一段项目源码&#xff0c;定义了一个 List 对象&#xff0c;往该列表对象 add 的代码前面有注释符号&#xff0c;但是程序运行时列表中却存在对象&#xff0c;为什么呢&#xff1f;仔细看了一下&#xff0c;注释符号和 add 代码之间有一个特殊符号 \u000d&#xff0c…

基于python的机器学习(一)—— 基础知识(Scikit-learn安装)

目录 一、机器学习基础 1.1 机器学习概述 1.2 监督学习、无监督学习和强化学习 1.3 聚类、分类、回归、标注 1.3.1 聚类 1.3.2 分类 1.3.3 回归 1.3.4 标注 1.4 机器学习、人工智能和数据挖掘 1.5 机器学习的三个要素 二、Scikit-learn 机器学习库 2.1 Scikit-lea…