【vue-2】v-on、v-show、v-if及按键修饰符

目录

1、v-on事件

2、按键修饰符

3、显示和隐藏v-show

4、条件渲染v-if


1、v-on事件

 创建button按钮有以下两种方式:

<button v-on:click="edit">修改</button>
<button @click="edit">修改</button>

完整示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 插值表达式 -->{{ msg }}<h1>{{web.title}}</h1><h2>{{web.url}}</h2><h1>{{number}}</h1><button v-on:click="edit">修改</button></div><script type="module">import {createApp, reactive, ref} from './vue.esm-browser.js'// const {createApp, reactive} = VuecreateApp({// setup选项,用于设置响应式数据和方法等setup(){const number = ref(10)number.value = 20const web = reactive({title:"开始学习vue啦",url:"vue.com"})const edit = () =>{web.url = "hhahaha"}return{msg:"sucess",web,number,edit}}}).mount("#app")// mount为挂载</script>
</body>
</html>

另:=>是es6中的语法。

举例说明:

(x)=> x + 6

相当于

function(x){return x+6;
}

2、按键修饰符

回车:

回车 <input type="text" @keyup.enter="add(20,50)"> <br>

空格:

空格 <input type="text" @keyup.space="add(10,80)"> <br>

Tab键:

Tab <input type="text" @keydown.tab="add(5,32)"> <br>

按键盘w键:

w <input type="text" @keyup.w="add(8,3)"> <br>

组合键: 

Ctrl+Enter <input type="text" @keyup.ctrl.enter="add(20,50)"> <br>
Ctrl+A <input type="text" @keyup.ctrl.a="add(20,50)"> <br>

 完整示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="vue.global.js"></script> -->
</head>
<body><div id="app"><!-- 插值表达式 -->{{ msg }}<h1>{{web.title}}</h1><h2>{{web.url}}</h2> <h2>{{web.user}}</h2>回车 <input type="text" @keyup.enter="add(20,50)"> <br>空格 <input type="text" @keyup.space="add(10,80)"> <br>Tab <input type="text" @keydown.tab="add(5,32)"> <br>w <input type="text" @keyup.w="add(8,3)"> <br><!-- 组合键 -->Ctrl+Enter <input type="text" @keyup.ctrl.enter="add(20,50)"> <br>Ctrl+A <input type="text" @keyup.ctrl.a="add(20,50)"> <br></div><script type="module">import {createApp, reactive} from './vue.esm-browser.js'// const {createApp, reactive} = VuecreateApp({// setup选项,用于设置响应式数据和方法等setup(){const web = reactive({title:"开始学习vue啦",url:"vue.com",user:0})const add = (a,b) =>{web.user += a+b}return{msg:"sucess",web,add}}}).mount("#app")// mount为挂载</script>
</body>
</html>

3、显示和隐藏v-show

实现的功能:当web.title为False,隐藏内容;当为True,显示内容。 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="vue.global.js"></script> -->
</head>
<body><div id="app"><!-- 插值表达式 --><h1>{{web.title}}</h1><p v-show="web.title">显示的内容</p><button @click="show">切换显示状态</button></div><script type="module">import {createApp, reactive} from './vue.esm-browser.js'// const {createApp, reactive} = VuecreateApp({// setup选项,用于设置响应式数据和方法等setup(){ const web = reactive({title:false})const show = () => {web.title = !web.title}return{web,show}}}).mount("#app")// mount为挂载</script>
</body>
</html>

 

4、条件渲染v-if

通过v-if也可实现上述功能,当v-if为True,显示内容,当为False,则不显示,只需在上述代码添加以下一行代码即可。

<p v-if="web.title">v-if显示的内容</p>

实现的功能:当web.user在不同数值段,显示不同的内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="vue.global.js"></script> -->
</head>
<body><div id="app"><!-- 插值表达式 --><p v-if="web.user < 1000">user小于1000</p><p v-else-if="web.user > 1000 && web.user < 2000">user小于2000</p><p v-else>user大于2000</p></div><script type="module">import {createApp, reactive} from './vue.esm-browser.js'// const {createApp, reactive} = VuecreateApp({// setup选项,用于设置响应式数据和方法等setup(){ const web = reactive({user:500})return{web     }}}).mount("#app")// mount为挂载</script>
</body>
</html>

 

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

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

相关文章

Docker in Docker 原理与实战

一、引言 随着容器化技术的普及&#xff0c;Docker 作为一种主流的容器管理工具&#xff0c;已被广泛应用于开发、测试及生产环境中。Docker 的灵活性和便捷性使得它成为 DevOps 流程中不可或缺的一部分。然而&#xff0c;在一些复杂的应用场景中&#xff0c;我们可能需要在一…

蜂窝物联四情监测:助力农业升级,科技赋能打造丰收新篇章!

农业四情指的是田间的虫情、作物的苗情、气候的灾情和土壤墒情。“四情”监测预警系统的组成包括管式土壤墒情监测站、虫情测报灯、气象站、农情监测摄像机&#xff0c;可实时监测基地状况,可以提高监测的效率和准确性&#xff0c;为农业生产提供及时、科学的数据支持&#xff…

【日常积累】jira安装与配置

jira简介 Jira 是一个由 Atlassian 开发的功能强大的项目管理和问题跟踪工具&#xff0c;广泛应用于软件开发、项目管理、缺陷跟踪和服务管理等领域。Jira 的多功能性和高度的可定制性使其成为一个强大的工具&#xff0c;适用于各种规模的团队和项目。无论是软件开发、项目管理…

浅谈JMeter体系结构

JMeter体系结构详解 JMeter是一款功能强大的开源性能测试工具&#xff0c;广泛应用于Web应用、数据库、FTP服务器等多种场景下的负载和压力测试。其灵活的体系结构设计使得测试计划的创建、执行与结果分析变得高效而直观。本文将深入解析JMeter的三维空间体系结构&#xff0c;…

C语言——小知识和小细节19

一、奇数位与偶数位互换 1、题目介绍 实现一个宏&#xff0c;将一个整数的二进制补码的奇数位与偶数位互换。输出格式依旧是十进制整数。示例&#xff1a; 2、分析 既然想要交换奇数位和偶数位上的数字&#xff0c;那么我们就要先得到奇数位和偶数位上的数字&#xff0c;那么…

又有人叫嚣:AI取代前端,来给你几张图,看能不能憋死AI。

总有自媒体人&#xff0c;为了些许流量&#xff0c;在大放厥词&#xff0c;说截个图给AI&#xff0c;AI就能输出前端代码&#xff0c;这是啥都敢说&#xff0c;吹牛不上税。 我来给你几张贝格前端工场日常接的大数据项目相关的图&#xff0c;你让AI生成代码&#xff0c;取代前…

Youngter-drive

BUUCTF逆向题Youngter-drive-CSDN博客 逆向每日一题----Youngter-drive题解-CSDN博客 借鉴博客,写得比我好 upx拖壳 upx -d Youngter-drive.exe 这道题我不知道为什么,我这里是运行不了的,也没有找到原因 int __cdecl main_0(int argc, const char **argv, const char **env…

「TypeScript系列」TypeScript 类/类继承

文章目录 一、TypeScript 类二、TypeScript 类继承三、TypeScript 类-关键字四、TypeScript 类-运算符五、TypeScript 类-重写&#xff08;Override&#xff09;六、TypeScript 类-访问控制修饰符1. public2. private3. protected 七、TypeScript 类和接口1. 类 (Classes)2. 接…

Nginx 的原理解析 worker 配置及相关问题 -细节狂魔

文章目录 前言Nginx 的最基本的执行过程&#xff08;master & worker&#xff09;worker 是如何进行工作的 一个 master 和 多个 woker 有哪些好处1、可以使用 nginx 热部署2、节省资源 && worker 进程之间互不影响 && nginx 服务不会中断 woker 设置多少才…

【知识图谱】探索攻略:基础、构建、高级应用与相关论文方向

【知识图谱】相关文章汇总 写在最前面一、什么是知识图谱&#xff1f;二、相关历史文章代码实现&#xff1a;简单的知识图谱可视化知识图谱前身&#xff1a;信息抽取知识图谱应用1&#xff1a;社交网络分析知识图谱应用2&#xff1a;威胁情报挖掘知识图谱应用3&#xff1a;Code…

解决Selenium NameError: name ‘By’ is not defined

解决Selenium NameError: name ‘By’ is not defined 文章目录 解决Selenium NameError: name By is not defined背景错误原因解决方法1. 检查导入语句2. 修正拼写和大小写3. 验证Selenium库安装4. 重启IDE或终端5. 检查环境变量 验证总结 背景 在使用Selenium进行Web自动化测…

Python小游戏——俄罗斯方块

文章目录 项目介绍环境配置代码设计思路1.初始化和导入库&#xff1a;2.定义颜色和屏幕尺寸&#xff1a;3.定义游戏逻辑&#xff1a;4.游戏循环&#xff1a; 源代码效果图 项目介绍 俄罗斯方块游戏是一款经典的益智游戏&#xff0c;玩家通过旋转和移动各种形状的方块&#xff…

并行查询定位问题

http://m.blog.itpub.net/22782597/viewspace-622714/ http://m.blog.itpub.net/30126024/viewspace-2148192/ 数据库降级执行 PARALLEL_DEGREE_POLICY PARALLEL_DEGREE_POLICY PARALLEL_MIN_PERCENT PARALLEL_SERVERS_TARGET PARALLEL_MAX_PERCENT SELECT * FROM V$SES_OPT…

【NumPy】关于numpy.clip()函数,看这一篇文章就够了

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

Gradle筑基——Gradle Maven仓库管理

基础概念&#xff1a; 1.POM pom:全名Project Object Model 项目对象模型&#xff0c;用来描述当前maven项目发布模块的基础信息 pom主要节点信息如下&#xff1a; 配置描述举例&#xff08;com.android.tools.build:gradle:4.1.1&#xff09;groupId组织 / 公司的名称com.…

初学Echart

创建一个html文件 1.引入 点击链接----快速上手网址&#xff1a;快速上手 - 使用手册 - Apache ECharts 复制这一串【这个是引入echart路径】 引入到这里 2.使用 我们在上一步---点击返回--往下翻---找到完整代码--复制黏贴 复制粘贴后--总体长这样 <!DOCTYPE html> &…

时钟源介绍

在微控制器&#xff08;特别是STM32系列微控制器&#xff09;的配置中&#xff0c;HSI、HSE和PLL是三种不同的时钟源&#xff0c;每个源都有其具体的用途和特点&#xff1a; HSI (High-Speed Internal) 定义&#xff1a;HSI代表高速内部时钟源。这是一个内置的振荡器&#xff…

在Linux服务上管理Redis的启动、重启和关闭

在Linux服务上管理Redis的启动、重启和关闭 Redis是一个高性能的开源键值对存储数据库&#xff0c;广泛用于缓存、会话管理和实时数据处理等场景。在Linux服务器上管理Redis服务是开发和运维人员需要掌握的重要技能。本文将详细介绍如何在Linux系统上启动、重启和关闭Redis服务…

【大模型部署】在C# Winform中使用文生图Stable Diffusion XL 模型

【大模型部署】在C# Winform中使用文生图Stable Diffusion XL 模型 前言 整了一个在C# Winform中调用文生图Stable Diffusion XL的小程序&#xff0c;基于百度智能云千帆平台 步骤 如何注册百度智能云和创建应用&#xff0c;获取API 密钥等和在之前的博客中基本相同&#…

[C++]debug介绍+debug时如何查看指针指向内存处的值

一、简介 预备工具和知识&#xff1a;使用使用VSCode使用Debug。 本文简介&#xff1a;本文将简要介绍debug中Continue&#xff0c;Step Over&#xff0c;Step Into和Restart的功能。并介绍如何在debug时查看动态内存地址&#xff08;指针&#xff09;的值&#xff1b; 二、D…