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

news2024/11/23 17:40:19

目录

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} = Vue
        createApp({
            // setup选项,用于设置响应式数据和方法等
            setup(){
                const number = ref(10)
                number.value = 20
                const 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} = Vue
        createApp({
            // 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} = Vue
        createApp({
            // 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} = Vue
        createApp({
            // setup选项,用于设置响应式数据和方法等
            setup(){ 
                const web = reactive({
                    user:500
                })
                
                return{
                    web     
                }
            }
        }).mount("#app")
        // mount为挂载
    </script>
</body>
</html>

 

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

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

相关文章

AlexNet论文解析—ImageNet Classification with Deep Convolutional Neural Networks

AlexNet论文解析—ImageNet Classification with Deep Convolutional Neural Networks 2012 研究背景 认识数据集&#xff1a;ImageNet的大规模图像识别挑战赛 LSVRC-2012&#xff1a;ImageNet Large Scale Visual Recoanition Challenge 类别训练数据测试数据图片格式Mnist1…

Block-level Image Service for the Cloud——论文泛读

TOS 2024 Paper 论文阅读笔记整理 问题 企业越来越需要敏捷和弹性的计算基础设施来快速响应现实世界的情况。容器通过提供高效的基于流程的虚拟化和分层映像系统&#xff0c;可以实现灵活和弹性的应用程序部署。然而&#xff0c;由于图像下载和解包过程&#xff0c;创建或更新…

Web开发学习总结

学习路线 Web 全球广域网&#xff0c;也称为万维网(www World Wide Web)&#xff0c;能够通过浏览器访问的网站 初识Web前端 Web标准也称为网页标准&#xff0c;由一系列的标准组成&#xff0c;大部分由W3C(World Wide Web Consortium&#xff0c;万维网联盟)负责制定。三个组…

Qt pro工程文件编写汇总(区分debug和release、32位和64位的方法,编译输出目录等)

前言&#xff1a; 从事qt开发已经好几年了&#xff0c;但有关pro编写的一些细节问题一直没有一个很好的梳理汇总——因为实际工作开发中&#xff0c;往往只需要编译特定版本的软件&#xff08;例如32位release版本&#xff09;&#xff0c;项目创建好后并设置好编译路径&#x…

OSPF网络类型实验2

对R4 对R5&#xff0c;找R1注册 对R1宣告环回&#xff0c;再宣告一下tunnel接口 本实验不考虑区域划分 现在已经全部宣告完成 对R1&#xff0c;2&#xff0c;3改接口 broadcast工作方式hello时间10s&#xff0c;然后进行dr选举&#xff0c;由于2&#xff0c;3之间没有伪广播 …

【探索数据结构】线性表之双链表

&#x1f389;&#x1f389;&#x1f389;欢迎莅临我的博客空间&#xff0c;我是池央&#xff0c;一个对C和数据结构怀有无限热忱的探索者。&#x1f64c; &#x1f338;&#x1f338;&#x1f338;这里是我分享C/C编程、数据结构应用的乐园✨ &#x1f388;&#x1f388;&…

乡村振兴的农业品牌建设:打造农业品牌,提升农产品附加值,增强乡村经济竞争力,实现美丽乡村经济繁荣

目录 一、引言 二、农业品牌建设的重要性 &#xff08;一&#xff09;提升农产品附加值 &#xff08;二&#xff09;增强乡村经济竞争力 &#xff08;三&#xff09;实现美丽乡村经济繁荣 三、农业品牌建设的现状及问题 &#xff08;一&#xff09;现状 &#xff08;二…

Go微服务: Nacos的搭建和基础API的使用

Nacos 概述 文档&#xff1a;https://nacos.io/docs/latest/what-is-nacos/搭建&#xff1a;https://nacos.io/docs/latest/quickstart/quick-start-docker/有很多种搭建方式&#xff0c;我们这里使用 docker 来搭建 Nacos 的搭建 这里&#xff0c;我们选择单机模式&#xf…

java实现图书系统源码

建包和类: Book Book: package Book;public class Book {private String name;private String author;private int price;private String type;private boolean isBorrowed;public Book(String name, String author, int price, String type) {this.name name;this.author …

【Qnx 】Qnx IPC通信PPS

Qnx IPC通信PPS Qnx自带PPS服务&#xff0c;PPS全称Persistent Publish/Subscribe Service&#xff0c;就是常见的P/S通信模式。 Qnx PPS的通信模式是异步的&#xff0c;Publisher和Subscriber也无需关心对方是否存在。 利用Qnx提供的PPS服务&#xff0c;Publisher可以通知多…

OrangePi KunPengPro | 开发板开箱测评之学习与使用

OrangePi KunPengPro | 开发板开箱测评之学习与使用 时间&#xff1a;2024年5月23日20:51:12 文章目录 OrangePi KunPengPro | 开发板开箱测评之学习与使用概述1.参考2.资料、工具3.使用3-1.通过串口登录系统3-2.通过SSH登录系统3-3.安装交叉编译工具链3-4.复制文件到设备3-5.第…

Android 使用 ActivityResultLauncher 申请权限

前面介绍了 Android 运行时权限。 其中&#xff0c;申请权限的步骤有些繁琐&#xff0c;需要用到&#xff1a;ActivityCompat.requestPermissions 函数和 onRequestPermissionsResult 回调函数&#xff0c;今天就借助 ActivityResultLauncher 来简化书写。 步骤1&#xff1a;创…

攻防世界[GoodRe]

攻防世界[GoodRe] 学到知识&#xff1a; 逆向的精髓&#xff1a;三分懂&#xff0c;七分蒙。TEA 算法快速识别&#xff08;蒙&#xff09;&#xff1a; 数据处理的形式&#xff1a;进入加密时的数据和加密结束后的数据&#xff0c;处理时数据的分组等等&#xff0c;都能用来…

AtCoder Beginner Contest 355 A~F

A.Who Ate the Cake?(思维) 题意 已知有三个嫌疑人&#xff0c;有两个证人&#xff0c;每个证人可以指出其中一个嫌疑人不是罪犯&#xff0c;如果可以排除两个嫌疑人来确定犯人&#xff0c;输出犯人的身份&#xff0c;如果无法确定&#xff0c;输出"-1"。 分析 …

Pytorch(Overview)

目标 如何利用pytorch完成学习系统&#xff1f; 理解神经网络&#xff08;neural networks&#xff09;和深度学习&#xff08;deep learning&#xff09;基础。 需要了解线性代数和概率论数理统计等相关关系&#xff0c;和python编程语言。 讨论理解 到底什么是human int…

vue3项目+TypeScript前端项目 ———— elemnet-plus,svg图标配置,sass,mock数据

一.集成element-plus 官网地址 安装 pnpm install element-plus 引入 // main.ts import { createApp } from vue import ElementPlus from element-plus import element-plus/dist/index.css import App from ./App.vueconst app createApp(App)app.use(ElementPlus) app.…

esp32-idf 开发踩坑记录

现象 直接使用原始命令编译idf.py build 但是提示idf 版本错误 卸载旧版本 编译出错build 问题 然后删除编译文件后&#xff0c;重新编译&#xff0c;还是出错 解决方法1 最后发现是因为项目所在文件夹有中文目录&#xff0c;把项目迁移到英文目录后&#xff0c;重新编译&a…

重学java 46.集合 ① Collection集合

事常与人违&#xff0c;事总在人为 —— 24.5.26 集合 知识导航 1.集合的特点以及作用 2.使用collection接口中的方法 3.使用迭代器迭代集合 4.ArrayList以及LinkedList的使用 5.使用增强for遍历集合 一、单列集合框架的介绍 1.长度可变的容器&#xff1a;集合 2.集合的特点 a.…

TCP/IP协议(一)

一.报文和协议 协议有什么作用&#xff1f;协议定义通信实体间所交换报文的格式和次序&#xff0c;以及在报文发送和/或接收或者其他事件方面所采取的行动(响应)。 什么是报文&#xff1f;指在网络中传输的数据单元&#xff0c;网络通讯的基本单位。&#xff08;HTTP报文、TCP报…

录屏技巧:win11怎么录屏?这5个电脑录屏方法快速了解下

无论您是想进行工作演示还是游戏直播&#xff0c;电脑录屏都有很大帮助。录制 Win 11 屏幕在很多方面都非常有效&#xff0c;因为它能让事情变得更简单。但 Win11怎么录屏呢&#xff1f;如果您仍有困惑&#xff0c;请查看本篇文章中列出的5个方法。在本文中&#xff0c;我们列出…