安装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;包含被打开文件的各种属性。那么进程与文件的关系就变成…

linux笔记(DNS)

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

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

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

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…

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

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

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…

React 入门课程 - 使用CDN编程React

1. 第一个React 注意&#xff1a;在vscode里&#xff0c;使用Live Server来运行html文件。 index.html <html><head><link rel"stylesheet" href"index.css"><script crossorigin src"https://unpkg.com/react17/umd/react.de…

23isctf

where_is_the_flag 1.打开环境&#xff0c;上面有一句话木马&#xff0c;直接蚁剑上 flag1&#xff1a;蚁剑连接上就可以直接看见&#xff0c;FLAG1:Yunxi{d0c0 flag2:在根目录下就有 797a-4697- flag3&#xff1a; 在主页面有一个start.sh里面有提示信息 4dfe-9b48-50ff…

传统RAG流程;密集检索器,稀疏检索器:中文的M3E

目录 传统RAG流程 相似性搜索中:神经网络的密集检索器,稀疏检索器 密集检索器 BGE系列模型 text-embedding-ada-002模型 M3E模型 稀疏检索器 示例一:基于TF-IDF的稀疏检索器 示例二:基于BM25的稀疏检索器 稀疏检索器的特点与优势 传统RAG流程 相似性搜索中:神经…

黑马程序员linux学习【持续更新】

Linux基础 一、Linux简介 1.分类 不同领域的主流操作系统&#xff0c;主要分为下 几类&#xff1a;桌面操作系统、服务器操作系统、移动设备操作系统、嵌入式操作系统。 桌面操作系统 操作系统特点Windows用户数量最多MacOS操作体验好&#xff0c;办公人士首选Linux用户数…

02多线程基础知识

目录 1. 线程与进程 进程&#xff08;Process&#xff09; 线程&#xff08;Thread&#xff09; 2. 并发和并行 并发&#xff08;Concurrency&#xff09; 并行&#xff08;Parallelism&#xff09; 3. CPU 调度 定义 类型 调度算法 上下文切换 4.线程间的状态流转…

brainpy 动力学编程基础

文章参考&#xff1a; 《神经计算建模实战——基于brainpy》 吴思 【brainpy学习笔记】基础知识2(动力学模型的编程基础)-CSDN博客 Brainpy手册 文章目录 积分器&#xff1a;定义ODE函数数值积分方法 更新函数和动力系统计算介绍什么是brainpy.DynamicalSystem&#xff1f;如…