Vue基本指令：v-on,v-if,v-mode

news2024/11/15 13:44:42

目录

Vue基本指令

1、v-text指令：设置标签的文本值

2、v-html指令：设置标签的innerHTML

3、v-on指令：为元素绑定事件

4、v-on:传参

5、v-show指令：根据真假切换元素的显示状态

6、v-if指令：根据表达式的真假切换元素的显示状态

7、v-bind：为元素绑定属性

8、v-for指令：根据数据生成列表结构

9、v-mode：便捷的设置和获取表单元素的值

Vue基本指令

1、v-text指令：设置标签的文本值

默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

v-text与{{}}的区别

使用v-text，标签内在加内容显示不出来

<h2 v-text="message + '!'">这里的内容不显示</h2>

在{{}}后面添加别的内容可以显示

<h2>{{ message + '!'}}这里的内容显示</h2>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text 指令</title>
</head>
<body>
    <div id="app">
       <h2 v-text="message + '!'">不显示</h2>
        <h2 v-text="info">不显示</h2>
        <h2>{{ message + '!'}}显示</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好，Vue！",
                info: "前端框架"
            }
        })
    </script>

</body>
</html>

2、v-html指令：设置标签的innerHTML

v-text：指令无论内容为什么都显示的是文本内容

v-html：指令有html结构会被解析为标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html指令</title>
</head>
<body>
    <div id="app">
        <p v-text="content"></p>
        <p v-html="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "<a href='https://www.taobao.com/'>淘宝</a>"
            }
        })
    </script>
</body>
</html>

3、v-on指令：为元素绑定事件

事件写在：methods中，事件名不用写on

语法：v-on：事件 = 绑定的事件名称

简写方法：@事件 = 绑定的事件名称

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击" @dblclick="doIt">
        <h2 @click="changeFood">点击：{{food}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food: "西红柿炒蛋"
            },
            methods: {
                doIt: function(){
                    alert("111")
                },
                changeFood: function(){
                    this.food +="好吃！"
                }
            }
        })
    </script>
</body>
</html>

4、v-on:传参

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上.修饰符可以对事件进行限制

.enter可以限制触发的按键为回车

示例：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'你好')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                doIt: function(p1,p2){
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function(){
                    alert("111")
                }
            }
        })
    </script>

</body>
</html>

练习：计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub"> - </button>
            <span> {{num}} </span>
            <button @click="add"> + </button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num: 1
            },
            methods: {
                add: function(){
                    if(this.num <10){
                        this.num++;
                    }else{
                        alert("已到最大值！")
                    }
                },
                sub: function(){
                    if(this.num >0){
                        this.num--;
                    }else{
                        alert("已到最小值！")
                    }
                }
            }
        })
    </script>
</body>
</html>

5、v-show指令：根据真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏，指令后面的内容,最终都会解析为布尔值，值为true元素

显示,值为false元素隐藏

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="增加年龄" @click="addAge">
        <img v-show="isShow" src="./06.jpg">
        <img v-show="age>=18" src="./06.jpg">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                age: 17
            },
            methods: {
                changeIsShow: function(){
                    this.isShow = !this.isShow;
                },
                addAge: function(){
                    this.age++;
                }
            }
        })
    </script>
</body>
</html>

6、v-if指令：根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true,元素存在于dom树中,为false,从dom树中移除

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if指令</title>
</head>
<body>
    
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">张三</p>
        <p v-show="isShow">张三-20</p>
        <p v-if="temperature > 30">热死了</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                temperature: 28
            },
            methods: {
                toggleIsShow: function(){
                    this.isShow = !this.isShow;
                    this.temperature++;
                }
               
            }
        })
    </script>
</body>
</html>

7、v-bind：为元素绑定属性

完整写法是v-bind:属性名

简写的话可以直接省略v-bind，只保留:属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle + '!'" 
        :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle + '!'" 
        :class={active:isActive} @click="toggleActive">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "./06.jpg",
                imgTitle: "柴犬",
                isActive: false
            },
            methods: {
                toggleActive: function(){
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>
</html>

8、v-for指令：根据数据生成列表结构

数组经常和v-for结合使用

语法是：( item,index ) in 数据

item和index可以结合其他指令一起使用

数组长度的更新会同步到页面上,是响应式的

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{index + 1}} 兴趣：{{item}}
            </li>
        </ul>
        <h2 v-for="item in music">
            {{item.name}}
        </h2>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["唱","跳","rap","篮球"],
                music: [
                    {name: "琵琶行"},
                    {name: "哪里都是你"}
                ]
            },
            methods: {
                add: function(){
                    this.music.push({name: "起风了"});
                },
                remove: function(){
                    this.music.shift();
                }
            }
            
        })
    </script>
</body>
</html>

9、v-mode：便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-modle="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message: " Hello Vue! "
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM: function(){
                    this.message = "Hellow word!"
                }
            }
        })
    </script>
</body>
</html>


 

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

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

相关文章

前端学习---

前端学习---

1.简单且必须掌握的 1.MVVM是什么 将MVC中的V变为了MVVM&#xff0c;实现了双向绑定。其中VM就是vue的作用&#xff0c;这样页面的动态化可以通过vue来操作&#xff0c;而不是页面直接与后端操作&#xff0c;实现了前后端的分离 2.为什么vue采用异步渲染 &#xff1f; 调…
阅读更多...
【云原生】k8s集群资源监控平台搭建—20230227

【云原生】k8s集群资源监控平台搭建—20230227

1. 监控指标 集群监控 ①节点资源利用率 ②节点数 ③运行pods pod监控 ①容器指标 ②应用程序 2. 监控平台 1. Prometheus 开源的&#xff1b;集成了很多功能&#xff0c;比如监控、报警、数据库等&#xff1b;以HTTP协议周期性的抓取被监控组件的状态以及相应的数据&…
阅读更多...
HarmonyOS Connect “Device Partner”专场FAQ来啦

HarmonyOS Connect “Device Partner”专场FAQ来啦

Device Partner平台是面向AIoT产业链伙伴的一站式服务平台&#xff0c;伙伴可以通过平台获取最新的产品、服务与解决方案&#xff0c;实现智能硬件产品的开发、认证、量产和推广等全生命周期的管理&#xff0c;加入HarmonyOS Connect生态&#xff0c;共同提升消费者的智慧生活体…
阅读更多...
就业天花板？33% 程序员月薪达到 5 万元以上

就业天花板？33% 程序员月薪达到 5 万元以上

2023年&#xff0c;随着互联网产业的蓬勃发展&#xff0c;程序员作为一个自带“高薪多金”标签的热门群体&#xff0c;被越来越多的人所关注。 在过去充满未知的一年中&#xff0c;他们的职场现状发生了一定的改变。那么&#xff0c;程序员岗位的整体薪资水平、婚恋现状、职业…
阅读更多...
主流消息队列RocketMq,RabbitMq比对使用

主流消息队列RocketMq,RabbitMq比对使用

首先整理这个文章是因为我正好有机会实战了一下rocketmq&#xff0c;阿里巴巴的一个开源消息中间件。所以就与以往中rabbitmq进行小小的比较一下。这里主线的根据常见面试问题进行整理。1.消息队列常用的场景1.1.削峰例如我们做得考试系统中&#xff0c;用户通过人脸识别登录系…
阅读更多...
Java查漏补缺（16）网络编程概述、网络通信要素、谈传输层协议：TCP与UDP协议、网络编程API、TCP网络编程、UDP网络编程、URL编程

Java查漏补缺（16）网络编程概述、网络通信要素、谈传输层协议：TCP与UDP协议、网络编程API、TCP网络编程、UDP网络编程、URL编程

Java查漏补缺&#xff08;16&#xff09;网络编程概述、网络通信要素、谈传输层协议&#xff1a;TCP与UDP协议、网络编程API、TCP网络编程、UDP网络编程、URL编程本章专题与脉络1. 网络编程概述1.1 软件架构1.2 网络基础2. 网络通信要素2.1 如何实现网络中的主机互相通信2.2 通…
阅读更多...
【全网最细PAT题解】【PAT乙】1024 科学计数法

【全网最细PAT题解】【PAT乙】1024 科学计数法

题目链接 1024 科学计数法 题目描述 科学计数法是科学家用来表示很大或很小的数字的一种方便的方法&#xff0c;其满足正则表达式 [-][1-9].[0-9]E[-][0-9]&#xff0c;即数字的整数部分只有 1 位&#xff0c;小数部分至少有 1 位&#xff0c;该数字及其指数部分的正负号即使对…
阅读更多...
Linux下安装Redis（云服务器）

Linux下安装Redis（云服务器）

一、选择自己需要下载的版本后&#xff0c;右击选择复制链接&#xff0c;然后利用命令进行下载&#xff0c;进入Xshell控制台&#xff0c;输入wget将复制的链接粘帖上 命令如下&#xff1a; wget https://download.redis.io/releases/redis-6.0.5.tar.gz 解压安装Redis解压 将下…
阅读更多...
Pure Admin - 基于 Vue3 / Vite / Pinia 等主流技术栈打造的免费开源中后台管理系统，包含前后端源码

Pure Admin - 基于 Vue3 / Vite / Pinia 等主流技术栈打造的免费开源中后台管理系统，包含前后端源码

有一段时间没有推荐 admin 管理系统了&#xff0c;今天推荐一个完整度很高&#xff0c;教程详细&#xff0c;很容易上手的 admin 框架。 关于 Pure Admin Pure Admin 是一款开源免费且开箱即用的中后台管理系统模版&#xff0c;内置超多页面模板以及基于 node.js 的后端开发源…
阅读更多...
金融信创步入快车道，应“需”而生的监控易运维方案为国产化助力

金融信创步入快车道，应“需”而生的监控易运维方案为国产化助力

在我国“28N”信创三步走战略中&#xff0c;金融信创赫然名列其中&#xff0c;成为最早践行信创理论与实操的行业之一。截止到目前&#xff0c;金融信创渗透率业已仅次于党政部门&#xff0c;位列“8”大重点行业之首。超快的发展速度&#xff0c;让金融信创较早的步入“买方市…
阅读更多...
Android 应用启动速度优化问题分析

Android 应用启动速度优化问题分析

在移动端程序中&#xff0c;用户希望的是应用能够快速打开。启动时间过长的应用不能满足这个期望&#xff0c;并且可能会令用户失望。轻则鄙视你&#xff0c;重则直接卸载你的应用。因此&#xff0c;App打开的速度的快慢是影响用户体验的重要因素之一。本篇文章主要为大家分享&…
阅读更多...
电信网上营业厅用户自服务系统的设计与实现

电信网上营业厅用户自服务系统的设计与实现

技术&#xff1a;Java、JSP等摘要&#xff1a;本文在对目前各种网上营业厅的功能原理进行了分析后&#xff0c;在山西省移动公司实习期间&#xff0c;为保证电信网上营业厅系统中心数据库的安全&#xff0c;设计了一个具有三层结构的网上营业厅&#xff0c;以web页面方式实现了…
阅读更多...
设计模式(十三)----结构型模式之桥接模式

设计模式(十三)----结构型模式之桥接模式

1 概述 现在有一个需求&#xff0c;需要创建不同的图形&#xff0c;并且每个图形都有可能会有不同的颜色。我们可以利用继承的方式来设计类的关系&#xff1a; 我们可以发现有很多的类&#xff0c;假如我们再增加一个形状或再增加一种颜色&#xff0c;就需要创建更多的类。 试…
阅读更多...
linux_实操篇

linux_实操篇

linux_实操篇]六、Linux远程登录6.1为什么linux要远程登录6.2远程登录linux-Xshell76.3远程上传下载文件-Xftp76.3.1解决中文乱码七、vi与vim编辑器7.1vim快速入门7.1.1基本介绍7.1.2 vi与vim常用三种模式7.1.3vi和vim基本使用7.2vi和vim快捷键7.2.1 快捷键练习八、linux的开机…
阅读更多...
Linux MISC 驱动实验

Linux MISC 驱动实验

目录 一、MISC 设备驱动简介 misc_deregister 函数 二、MISC驱动编写 1、编写框架 2、platform结构体对应的函数 2、宏定义和miscbeep设备结构体 3、定义miscdevice结构体 字符设备操作集 4、probe函数 5、remove函数​编辑 验证 6、添加开关 三、总代码 APP mis…
阅读更多...
MySQL-锁

MySQL-锁

MySQL-4-锁概述锁的分类全局锁基本语法&#xff1a;特点表级锁介绍分类表锁读锁测试写锁测试写锁测试元数据锁意向锁分类行级锁介绍行锁间隙锁/临键锁概述 锁是计算机协调多个进程或者线程并发访问某一资源的机制&#xff0c;在数据库中&#xff0c;除传统的计算资源&#xff…
阅读更多...
PCB第六道主流程之AOI，你都知道吗

PCB第六道主流程之AOI，你都知道吗

衔接上文&#xff0c;继续为朋友们分享普通单双面板的生产工艺流程。 如图&#xff0c;第六道主流程为AOI。 AOI的目的为&#xff1a; 利用光学原理&#xff0c;比对资料&#xff0c;进行检验&#xff0c;并附带相应的维修与报废处理。 其子流程&#xff0c;主要为3个。 【…
阅读更多...
面试必刷101 Java题解 -- part 3

面试必刷101 Java题解 -- part 3

part1 – https://blog.csdn.net/qq_41080854/article/details/129204480 part2 – https://blog.csdn.net/qq_41080854/article/details/129224785 面试必刷101 Java题解 -- part 3动规五部曲71、斐波那契数列72、跳台阶73、最小花费爬楼梯74、最长公共子序列(二)75、最长公共…
阅读更多...
比特数据结构与算法（第四章_中_续②）堆解决Topk问题（最小的k个数）

比特数据结构与算法（第四章_中_续②）堆解决Topk问题（最小的k个数）

TopK问题介绍&#xff1a;在N个数中找出最大/小的前K个 &#xff08;比如在1000个数中找出最大/小的前10个&#xff09;以前的方法&#xff1a;冒泡排序。时间复杂度&#xff1a; O(N^2)现在找最大的k个数的方法&#xff1a;方法1&#xff1a;堆排序降序&#xff0c;前N个就是最…
阅读更多...
提高香港数据中心安全性的 5 种方法

提高香港数据中心安全性的 5 种方法

在说明如何有效提高香港数据中心安全性之前&#xff0c;让我们快速了解什么是香港数据中心&#xff0c;以及为什么它对任何企业都很重要。 什么是香港数据中心? 无需深入研究复杂的术语和过多的细节&#xff0c;香港数据中心只是负责保存公司大量敏感或专有信息的设施&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023