vue3+ts v-model 深度学习

news2024/11/6 3:15:59
<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.coloradmin.cn/o/1261328.html

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

相关文章

WebUI自动化学习(Selenium+Python+Pytest框架)002

新建项目 New Project 新建一个python代码文件 file-new-python file 会自动创建一个.py后缀的代码文件 注意:命名规则,包含字母、数字、下划线&#xff0c;不能以数字开头&#xff0c;不能跟python关键字或包名重复。 ********************华丽分割线********************…

经典神经网络——AlexNet模型论文详解及代码复现

一、背景 AlexNet是在2012年由Alex Krizhevsky等人提出的&#xff0c;该网络在2012年的ImageNet大赛上夺得了冠军&#xff0c;并且错误率比第二名高了很多。Alexnet共有8层结构&#xff0c;前5层为卷积层&#xff0c;后三层为全连接层。 论文地址&#xff1a;ImageNet Classif…

SQL注入-HTTP头注入

目录 HTTP Header概述 HTTP Header注入 HTTP Header注入概述 HTTP Header注入实例 HTTP Header概述 HTTP工作原理 HTTP请求方法 HTTP报文类型 请求报文&#xff08;HTTP Request&#xff09;&#xff1a;由客户端发给服务器的消息&#xff0c;其组成包括请求行&#xff08;R…

pinpoint链路跟踪运用及日志logback配置

本文将讲述pinpoint的安装&#xff0c;使用及与java logback 日志的集成。 介绍 是什么 是一款 APM监控工具(Application Performance Management/应用性能管理)基于java编写用于 大规模分布式系统 的监控&#xff0c;是 分析 大规模分布式系统 的平台基于google Dapper开发&…

案例分析-FATfs文件系统移植单片机内存不够问题分析和解决

在通过cubeMX自带的FATfs 文件系统在STM32F103C8T6上进行移植&#xff0c;正式调用后&#xff0c;发现系统报错&#xff0c;出现内存空间不足问题。如下&#xff1a; 更改更大容量的单片机进行编译&#xff0c;通过了 说明刚开始分析空间不够是对的&#xff0c;是flash不够还是…

Python实现WOA智能鲸鱼优化算法优化XGBoost回归模型(XGBRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 鲸鱼优化算法 (whale optimization algorithm,WOA)是 2016 年由澳大利亚格里菲斯大学的Mirjalili 等提…

Vue 3 面试经验分享

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Batch Norm简明图解【批归一化】

Batch Norm&#xff08;批归一化&#xff09; 是现代深度学习实践者工具包的重要组成部分。 在批归一化论文中引入它后不久&#xff0c;它就被认为在创建可以更快训练的更深层次神经网络方面具有变革性。 Batch Norm 是一种神经网络层&#xff0c;现在在许多架构中普遍使用。 …

uni-app:心跳机制基础逻辑(定时器方法解决)

思路 1、在登录的时候&#xff0c;定义一个存储当前时间的全局变量&#xff0c;并且开始心跳请求 2、在全局中定义一个定时器&#xff0c;该定时器每秒都会执行一次&#xff0c;并获取当前的时间 3、将定时器每秒的获取的当前时间和全局变量获取的时间进行比较 4、指定一个…

Oracle ORA12514 监听程序当前无法识别连接描述符中请求的服务

最简单的有可能是你的服务还没有开启&#xff0c;需要启动服务&#xff01;&#xff01;&#xff01;&#xff01; 在连接数据库的时候&#xff0c;有时会遇到一个“ORA12514&#xff1a;监听程序当前无法识别连接描述符中请求的服务”的错误&#xff0c;这个错误其实就是数据…

针对MAC上,面对8080端口被占用怎么解决

首先输入这个命令&#xff0c;在终端&#xff0c;这个是搜查命令&#xff0c;搜查当前8080端口被谁占着 sudo lsof -i :8080 杀死当前的进程 kill -9 1821 kill -9 (上面写着的PID)

NX二次开发UF_CURVE_ask_wrap_curves 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_ask_wrap_curves Defined in: uf_curve.h int UF_CURVE_ask_wrap_curves(tag_t wrap_curve_object, int * num_output_curves, tag_t * * output_curves ) overview 概述 …

深度学习【二】

1.运行时错误 1.1 ModuleNotFoundError: No module named ‘torch_scatter’ 参考 https://blog.csdn.net/weixin_42421914/article/details/132875571 pip install --no-index torch-scatter -f https://pytorch-geometric.com/whl/torch-1.13.1%2Bcpu.html

unity学习笔记10

一、生命周期函数 1.Awake() 调用时间&#xff1a;对象被激活或创建时。 用途&#xff1a;通常用于初始化对象的状态&#xff0c;获取组件引用或执行其他在脚本生命周期早期需要完成的任务。 2.OnEnable(): 调用时间&#xff1a;对象激活时&#xff0c;包括对象被创建和Se…

2023_Spark_实验二十一:Zookeeper单机安装与配置

zookeeper单机安装与配置一、zookeeper的安装 1.上传zookeeper-3.4.5.tar.gz到/tools目录下 2.解压安装zookeeper到/training中 tar -zvcf zookeeper-3.4.5.tar.gz -C /opt/soft_installed/zookeeper-3.4.53.配置环境变量 vim /home/lh/.bashrc# 添加内容如下 export ZK_HOME…

京东运营数据分析(京东数据采集):2023年10月京东护肤行业品牌销售排行榜

鲸参谋监测的京东平台10月份护肤市场销售数据已出炉&#xff01; 鲸参谋数据显示&#xff0c;2023年10月份&#xff0c;京东平台上护肤市场的销量为2000万&#xff0c;环比增长约28%&#xff0c;同比降低约26%&#xff1b;销售额为25亿&#xff0c;环比增长约24%&#xff0c;同…

shell编程系列- bash和sh的区别

文章目录 引言bash和sh的区别CentOS下的区别Ubuntu下的区别 最佳实践 引言 我们在编写shell脚本时&#xff0c;通常第一行都要声明当前脚本的执行程序&#xff0c;也就是常见的 #!/bin/sh 或者是 #!/bin/bash &#xff0c;我们无论用哪一个脚本似乎都可以正常的执行&#xff0…

三丶openlayer之source和layer

1.source和layer的概念 在前面的例子中&#xff0c;已经对Source和Layer有所了解了&#xff0c;我们用天地图为底图加载出来东西&#xff0c;但是这个世界上的地图不仅仅是有天地图一种类型&#xff0c;比如Google地图&#xff0c;高德地图&#xff0c;百度地图等&#xff0c;…

Java中如何构建平衡二叉树

定义&#xff1a;平衡二叉树是一棵二叉排序树&#xff0c;或者为空&#xff0c;或者满足以下条件&#xff1a; 1)左右子树高度差的绝对值不大于1&#xff1b; 2)左右子树都是平衡二叉树。 平衡因子&#xff1a;左子树的高度减去右子树的高度&#xff0c;显然&#xff0c;在平衡…

【C/PTA —— 12.指针1(课内实践)】

C/PTA —— 12.指针1&#xff08;课内实践&#xff09; 6-1 交换两个整数的值6-2 利用指针找最大值6-3 字符串的连接6-4 移动字母 6-1 交换两个整数的值 void fun(int* a, int* b) {int* tmp *a;*a *b;*b tmp; }6-2 利用指针找最大值 void findmax(int* px, int* py, int* p…