Vue2 通过.sync修饰符实现数据双向绑定

App.vue

<template><div class="app"><buttonv-on:click='isShow=true'>退出按钮</button><BaseDialog:visible.sync='isShow'></BaseDialog></div>
</template><script>
import BaseDialog from "./components/BaseDialog.vue"
export default {data() {return {isShow:false,}},methods: {},components: {BaseDialog,},
}
</script><style>
</style>

BaseDialog.vue

<template>
<!-- 通过v-show --><div class="base-dialog-wrap" v-show='visible'><div class="base-dialog"><div class="title"><h3>温馨提示:</h3><button v-on:click='close' class="close">x</button></div><div class="content"><p>你确认要退出本系统么?</p></div><div class="footer"><button v-on:click='close'>确认</button><button >取消</button></div></div></div>
</template><script>
export default {props:{visible:Boolean},methods:{close(){this.$emit('update:visible',false)}}
}
</script><style scoped>
.base-dialog-wrap {width: 300px;height: 200px;box-shadow: 2px 2px 2px 2px #ccc;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 0 10px;
}
.base-dialog .title {display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #000;
}
.base-dialog .content {margin-top: 38px;
}
.base-dialog .title .close {width: 20px;height: 20px;cursor: pointer;line-height: 10px;
}
.footer {display: flex;justify-content: flex-end;margin-top: 26px;
}
.footer button {width: 80px;height: 40px;
}
.footer button:nth-child(1) {margin-right: 10px;cursor: pointer;
}
</style>

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

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

相关文章

多符号表达式的共同子表达式提取教程

生成的符号表达式&#xff0c;可能会存在过于冗长的问题&#xff0c;且多个符号表达式中&#xff0c;有可能存在相同的计算部分&#xff0c;如果不进行处理&#xff0c;计算过程中会导致某些算式计算多次&#xff0c;从而影响计算效率。 那么多个符号表达式生成函数时&#xf…

[机器学习]KNN——K邻近算法实现

一.K邻近算法概念 二.代码实现 # 0. 引入依赖 import numpy as np import pandas as pd# 这里直接引入sklearn里的数据集&#xff0c;iris鸢尾花 from sklearn.datasets import load_iris from sklearn.model_selection import train_test_split # 切分数据集为训练集和测试…

2024年数学建模美赛 分析与编程

2024年数学建模美赛 分析与编程 1、本专栏将在2024年美赛题目公布后&#xff0c;进行深入分析&#xff0c;建议收藏&#xff1b; 2、本专栏对2023年赛题&#xff0c;其它题目分析详见专题讨论&#xff1b; 2023年数学建模美赛A题&#xff08;A drought stricken plant communi…

python脚本实现浏览器驱动chromedriver的版本自动升级

chromedriver的版本号与chrome浏览器版本不匹配时在运行程序时就会报错 用下面的脚本可以自动安装chromedriver的最新版本到指定路径 from webdriver_manager.utils import get_browser_version_from_os from webdriver_manager.chrome import ChromeDriverManager import re…

Spring JPA与Hibernate学习使用

EntityManager 在使用持久化工具的时候&#xff0c;一般都有一个对象来操作数据库&#xff0c;在原生的Hibernate中叫做Session&#xff0c;在 JPA 中叫做EntityManager&#xff0c;在MyBatis中叫做SqlSession&#xff0c;通过这个对象来操作数据库。 EntityManager是 JPA 中…

比VS Code快得多

Zed 是一款支持多人协作的代码编辑器&#xff0c;底层采用 Rust&#xff0c;且默认支持 Rust&#xff0c;还自带了 rust-analyzer&#xff0c;主打“高性能”。1 月 24 日&#xff0c;备受关注的 Zed 项目宣布正式开源。 Zed 代码库将采用 Copyleft 许可证&#xff0c;其中编辑…

JavaSE——运算符、运算符优先级、API、Scanner

目录 基本的算术运算符 自增自减运算符 赋值运算符 关系运算符 逻辑运算符 三目运算符 运算符优先级 API Scanner 基本的算术运算符 符号作用加-减*乘/除%取余 基本与C语言的基本算术运算符一致 注意&#xff1a;两个整数相除结果还是整数 public static void main…

C++PythonC# 三语言OpenCV从零开发(7):图像的阈值

文章目录 相关链接前言阈值阈值使用代码PythonCCsharpcsharp代码问题 总结 相关链接 C&Python&Csharp in OpenCV 专栏 【2022B站最好的OpenCV课程推荐】OpenCV从入门到实战 全套课程&#xff08;附带课程课件资料课件笔记&#xff09; OpenCV一个窗口同时显示多张图片 …

C 变量

目录 1. C变量 2. C变量定义 2.1 变量初始化 2.2 C中的变量声明 3. C中的左值&#xff08;Lvalues&#xff09;和右值&#xff08;Rvalues&#xff09; 1. C变量 在C语言中&#xff0c;变量可以根据其类型分为以下几种基本类型&#xff1a; 整型变量&#xff1a;用…

自然语言nlp学习 三

4-8 Prompt-Learning--应用_哔哩哔哩_bilibili Prompt Learning&#xff08;提示学习&#xff09;是近年来在自然语言处理领域中&#xff0c;特别是在预训练-微调范式下的一个热门研究方向。它主要与大规模预训练模型如GPT系列、BERT等的应用密切相关。 在传统的微调过程中&a…

Mac 上 Ln 指令使用说明

ln指令 ln 是 Mac 中又一个非常重要命令&#xff0c;它的功能是为某一个文件在另外一个位置建立一个同不的链接&#xff0c;这个命令最常用的参数是 -s&#xff0c;具体用法是&#xff1a;ln –s 源文件 目标文件。 实例&#xff1a; /Users/apple/Desktop git:(master) ✗&g…

将vite项目(vue/react)使用vite-plugin-pwa配置为pwa应用,只需要3分钟即可

将项目配置为pwa模式&#xff0c;就可以在浏览器里面看到安装应用的选项&#xff0c;并且可以将web网页像app一样添加到手机桌面或者pad桌面上&#xff0c;或者是电脑桌面上&#xff0c;这样带来的体验就像真的在一个app上运行一样。为了实现这个目的&#xff0c;我们可以为vue…

Ubuntu18搭建Kubernate集群

1.基本环境 版本介绍 ubuntu 18.04 docker 20.10 kube-apiserver 1.21.3 kube-controller-manage 1.21.3 kube-scheduler 1.21.3 kube-proxy 1.21.3 kubernetes 21.10 2.ubuntu环境必备 Docker环境 参考&#xff1a;Ubuntu18配置Docker 关闭防火墙 ufw disable关闭…

算法设计与分析实验:滑动窗口与二分查找

目录 一、寻找两个正序数组的中位数 1.1 具体思路 1.2 流程展示 1.3 代码实现 1.4 代码复杂度分析 1.5 运行结果 二、X的平方根 2.1 具体思路 2.2 流程展示 2.3 代码实现 2.4 代码复杂度分析 2.5 运行结果 三、两数之和 II-输入有序数组 3.1 采用二分查找的思想 …

【InternLM 大模型实战】作业与笔记汇总

笔记1&#xff1a;书生浦语大模型全链路开源体系 笔记2&#xff1a;轻松玩转书生浦语大模型趣味Demo 作业2&#xff1a;https://github.com/xiaomile/InternLM-homework/tree/main/%E4%BD%9C%E4%B8%9A1 笔记3&#xff1a;基于 InternLM 和 LangChain 搭建你的知识库 作业3&…

LeetCode —— 43. 字符串相乘

&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️Take your time ! &#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️…

Bio-Rad(Abd serotec)独特性抗体

当一种抗体与另一种抗体的独特型结合时&#xff0c;它被称为抗独特型抗体。抗体的可变部分包括独特的抗原结合位点&#xff0c;称为独特型。独特型(即独特型)内表位的组合对于每种抗体都是独特的。 如今开发的大多数治疗性单克隆抗体是人的或人源化的&#xff0c;用于诱导抗药…

华为策略路由+NQA配置

---NQA--- [RouterA] nqa test-instance admin NQA [RouterA-nqa-admin-vlan10] test-type icmp [RouterA-nqa-admin-vlan10] destination-address ipv4 对方地址 [RouterA-nqa-admin-vlan10] frequency 10 [RouterA-nqa-admin-vlan10] probe-count 2 [RouterA-nqa-admin-vlan…

【国产MCU】-认识CH32V307及开发环境搭建

认识CH32V307及开发环境搭建 文章目录 认识CH32V307及开发环境搭建1、CH32V307介绍2、开发环境搭建3、程序固件下载1、CH32V307介绍 CH32V307是沁恒推出的一款基于32位RISC-V设计的互联型微控制器,配备了硬件堆栈区、快速中断入口,在标准RISC-V基础上大大提高了中断响应速度…

【HTML 基础】标签的属性

文章目录 1. src - 图像和脚本的来源2. alt - 替代文本3. href - 超链接目标4. class - 类5. id - 标识符总结 在 HTML 中&#xff0c;标签不仅定义了文档的结构和内容&#xff0c;还可以通过属性为标签提供附加信息&#xff0c;以调整标签的行为或外观。以下是一些常见的 HTML…