vue3+ts v-model 深度学习

<template><div><h1>我是App.vue组件</h1><div>isShpw:{{ isShow }}</div><div>text:{{ text }}</div><div><button @click="isShow = !isShow">开关</button></div><hr /><vModeValue v-model:textVal.isBt="text" v-model="isShow"></vModeValue></div>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
import vModeValue from "./components/v-model.vue";
const isShow = ref<boolean>(true);
const text = ref<string>("小满");
</script><style scoped></style>

v-model.vue:

<template><div class="model" v-if="modelValue"><div class="close"><button @click="close">关闭</button></div><h3>我是v-model子组件 dialog</h3><div>内容:<input @input="change" type="text" :value="textVal" /></div></div>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
const props = defineProps<{modelValue: boolean;textVal: string;textValModifiers?: {isBt: boolean;};
}>();
const emit = defineEmits(["update:modelValue", "update:textVal"]);const close = () => {emit("update:modelValue", false);
};
const change = (e: Event) => {const target = e.target as HTMLInputElement;emit("update:textVal",props?.textValModifiers?.isBt ? target.value + "变态" : target.value);
};
</script><style>
.model {width: 500px;border: 5px solid #ccc;padding: 10px;
}
.close {display: flex;justify-content: flex-end;
}
</style>

在这里插入图片描述

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

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

相关文章

在Matlab里安装gurobipy怎么安装教程

在Matlab 里安装gurobipy 先在CMD里激活&#xff0c; 然后添加系统环境变量 GRB_LICENSE_FILEC:\gurobi10.2\gurobi.lic 然后输入 addpath(D:\gurobi1003\win64\matlab) addpath(C:\gurobi1003\win64\matlab) addpath(C:\gurobi1002\win64\matlab) C:\gurobi1003\win64\m…

Excel如何比较两列数据的不同

当遇到exel有两个列表的数据&#xff0c;需要比较得到他们的不同的部分&#xff0c;并且得到一个不同的值的列表。示例如下&#xff1a; 目的是&#xff1a;通过比较&#xff0c;知道Column2的哪些值不在在Column1里。 WPS直接提供了这一个功能&#xff0c;如下图&#xff1a;…

【日常总结】Swagger 3.0 + 集成 knife4j ,并设置header入参

一、场景 环境&#xff1a; 二、问题 思路 &#xff1a; 三、解决方案 &#xff08;推荐&#xff09; Stage 1&#xff1a;接入knife4j 依赖 Stage 2&#xff1a;修改 yaml 配置 Stage 3&#xff1a;修改 swagger 3 配置文件 Stage 4&#xff1a;查看效果 Swagger UI …

python爬虫实习找工作练习测试(以下内容仅供参考学习)

要求&#xff1a;获取下图指定网站的指定数据 空气质量状况报告-中国环境监测总站 输入&#xff1a;用户输入下载时间范围&#xff0c;格式为2022-10 输出&#xff1a;将更新时间在2022年10月1日到31日之间的文件下载到本地目录&#xff08;可配置&#xff09;&#xff0c;并…

WordPress:构建强大的网站和博客的完美选择

WordPress&#xff1a;构建强大的网站和博客的完美选择 一、WordPress 简介1.1 WordPress 介绍1.2 WordPress 优势 二、部署LNMP环境2.1 前提条件2.2 关闭防火墙和SELinux2.3 安装Nginx2.4 安装MySQL2.5 安装PHP2.6 配置Nginx2.7 配置MySQL2.8 配置PHP2.9 测试访问LNMP平台 三、…

【vue_3】关于超链接的问题

1、需求2、修改前的代码3、修改之后&#xff08;1&#xff09;第一次&#xff08;2&#xff09;第二次&#xff08;3&#xff09;第三次&#xff08;4&#xff09;第四次&#xff08;5&#xff09;第五次 1、需求 需求&#xff1a;要给没有超链接的列表添加软超链接 2、修改前…

【密码学引论】分组密码

第三章 分组密码 DES、IDEA、AES、SM4 1、分组密码定义&#xff08;按照五个组成部分答&#xff09; 密钥空间&#xff1a;属于对称加密算法kekd明密文空间&#xff1a;将明文划分为m比特的组&#xff0c;每一块依次进行加密加解密算法&#xff1a;由key决定一个明文到密文的…

011 OpenCV warpAffine

目录 一、环境 二、warpAffine原理 三、完整代码 一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、warpAffine原理 warpAffine是OpenCV库中的一个函数&#xff0c;它用于执行二维仿射变换。这个函数接受一个输入图像和变换矩阵&…

二叉树的递归套路(1)

与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 是否平衡二叉树 &#x1f48e;总结 是否平衡二叉树 题目 给定一颗二叉树的头节点head&#xff0c;返回这颗二叉树是不是平衡二叉树 平衡二叉树就是这个树的所有子树和它自己&#xff0c;左右子树高度差不超过1 递归…

Rust语言入门教程(六) - 字符串类型

在Rust中&#xff0c; 字符串类型其实是一个比较复杂的话题。在Rust的标准库中&#xff0c;至少都提供了6种字符串类型&#xff0c;我们平常使用的最多的是其中的两种。这两种类型互相之间也有所关联&#xff1a; str&#xff1a; 字符串切片String 字符串 其中&#xff0c; 字…

Postman接口测试 —— 设置断言和集合运行

一、常见的5种断言方法 Postman是一款非常强大的API接口调式工具&#xff0c;它自带断言方法&#xff0c;不需要学习JavaScript脚本&#xff0c;非常方便。 &#xff08;1&#xff09;Status code&#xff1a;Code is 200(校验接口返回结果的状态码) &#xff08;2&#xff09…

python+feon有限元分析|求解实例

目录 1、feon框架结构 2. 支持的单元类型 3、实例 1、feon框架结构 包含三个包&#xff1a; sa&#xff1a;结构分析包 ffa&#xff1a;流体分析包 derivation&#xff1a;刚度矩阵包 2. 支持的单元类型 Spring1D11 - 一维弹簧单元 Spring2D11 - 二维弹簧单元 Spring…

MySQL运行在docker容器中会损失多少性能

前言 自从使用docker以来&#xff0c;就经常听说MySQL数据库最好别运行在容器中&#xff0c;性能会损失很多。一些之前没使用过容器的同事&#xff0c;对数据库运行在容器中也是忌讳莫深&#xff0c;甚至只要数据库跑在容器中出现性能问题时&#xff0c;首先就把问题推到容器上…

Java学习路线第一篇:Java基础(2)

这篇则分享Java学习路线第一part&#xff1a;Java基础&#xff08;2&#xff09; 从看到这篇内容开始&#xff0c;你就是被选定的天命骚年&#xff0c;将承担起学完Java基础的使命&#xff0c;本使命为单向契约&#xff0c;你可选择YES或者选择YES。 具体路线安排&#xff1a…

ubuntu 下载编译 opencv4.2.0并检验

如有帮助点赞收藏关注&#xff01; 如需转载&#xff0c;请注明出处&#xff01; ubuntu 的opencv4.2.0下载与编译 下载依赖开始编译安装配置OpenCV编译环境检验* 完成 下载 首先下载opencv源码网址&#xff1a; https://opencv.org/releases/page/3/ 下载成zip后&#xff0c;…

QMap key()和value(const Key key, const T defaultValue = T()) const第二个参数作用

value()函数介绍 返回与键key关联的值。 如果map不包含键为key的项&#xff0c;则该函数返回defaultValue。 如果没有指定defaultValue&#xff0c;该函数返回一个默认构造的值。 如果映射中有多个key项&#xff0c;则返回最近插入的项的值。 示例 定义自定义类型&#xff…

3D模型顶点颜色转纹理【SIMPLYGON】

在这篇博客中&#xff0c;我们将了解如何将顶点颜色烘焙到纹理中。 其用例是某些照片扫描资产&#xff0c;其中颜色数据保存到顶点颜色中。 我们将了解如何使用 remesher 和聚合器管道来完成此操作。 我们还将介绍如何为顶点颜色材质创建着色网络以及如何从模型后处理中删除顶点…

6.Spring源码解析-loadBeanDefinitions(String location)

这里resourceLoader其实就是ClassPathXmlApplicationContext 1.ClassPathXmlApplicationContext 在上文中图例就能看出来 获取资源组可能存在多个bean.xml 循环单独加载资源组 创建一个编码资源并解析 获取当前正在加载的资源发现是空 创建了一个字节输入流&#xff0c…

pytorch分布式训练

1 基本概念 rank&#xff1a;进程号&#xff0c;在多进程上下文中&#xff0c;我们通常假定rank 0是第一个进程或者主进程&#xff0c;其它进程分别具有1&#xff0c;2&#xff0c;3不同rank号&#xff0c;这样总共具有4个进程 node&#xff1a;物理节点&#xff0c;可以是一个…

Find My键盘|苹果Find My技术与键盘结合,智能防丢,全球定位

键盘是最常用也是最主要的输入设备&#xff0c;通过键盘可以将英文字母、汉字、数字、标点符号等输入到计算机中&#xff0c;从而向计算机发出命令、输入数据等。还有一些带有各种快捷键的键盘。随着时间的推移&#xff0c;渐渐的市场上也出现独立的具有各种快捷功能的产品单独…