Vue指令（一）--v-html、v-show、v-if、v-else、v-else-if、v-on、v-bind、v-for、v-model

目录

（一）初识指令和内容渲染指令v-html

1.v-html

案例： 

官网的API文档 

（二）条件渲染指令v-show和v-if 

1. v-show

2. v-if

（三）条件渲染指令v-else和v-else-if

案例 

（四）事件绑定指令 v-on

 1.内联语句

 简写

2.事件处理函数

  3.给事件处理函数传参

（五）属性绑定指令v-bind

（六）列表渲染指令v-for

1.v-for中的key

区别：加key-不加key 

（七）双向绑定指令v-model

（一）初识指令和内容渲染指令v-html

Vue 会根据不同的 【指令】 ，针对标签实现不同的 【功能】
指令：带有 v- 前缀 的 特殊 标签属性

1.v-html

作用：设置元素的 innerHTML
语法：v-html = " 表达式 "

案例： 

<body>

    <div id="app">

        <div v-html="msg"></div>

    </div>

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

    <script>

        const app = new Vue({

            el: '#app',

            data: {

                msg: `

                    <a href="https://www.baidu.com">

                        baidu

                    </a>

                    `

            }

        })

    </script>

</body>

 

官网的API文档 

（二）条件渲染指令v-show和v-if 

1. v-show

  1. 作用： 控制元素显示隐藏
  2. 语法： v-show = "表达式" 表达式值 true 显示， false 隐藏
  3. 原理： 切换 display:none 控制显示隐藏
  4. 场景： 频繁切换显示隐藏的场景

2. v-if

  1. 作用： 控制元素显示隐藏（条件渲染）
  2. 语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
  3. 原理： 基于条件判断，是否 创建 或 移除 元素节点
  4. 场景： 要么显示，要么隐藏，不频繁切换的场景

示例代码：

<html>

    <head>

        <style>

            .box {

                border: 3px solid #000000;

                border-radius: 10px;

                padding: 20px;

                margin: 20px;

                width: 200px;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <div v-show="flag" class="box">我是v-show控制的盒子</div>

            <div v-if="flag" class="box">我是v-if控制的盒子</div>

        </div>

   

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

   

        <script>

            const app = new Vue({

                el: '#app',

                data: {

                    flag:true,

                }

            })

        </script>

    </body>

</html>

演示截图：

当flag为true时：

当flag为false时：

1.v-show的底层原理：

切换css的diaplay: none来控制显示还是隐藏

2.v-if的底层原理：

根据判断条件来控制元素的创建和移除（当结果为true时当前元素就创建出来，为false时元素就销毁）

（三）条件渲染指令v-else和v-else-if

1. 作用： 辅助 v-if 进行判断 渲染
2. 语法： v-else v-else-if = "表达式"
3. 注意： 需要紧挨着 v-if 一起使用

案例 

 示例代码：

<html>

    <head>

        <title>

            案例

        </title>

    </head>

    <body>

        <div id="app">

            <p v-if="gender === 1">性别：♂ 男</p>

            <p v-else>性别：♀ 女</p>

            <hr>

            <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>

            <p v-else-if="score >=70">成绩评定B：奖励周末郊游</p>

            <p v-else-if="score >=60">成绩评定C：奖励零食礼包</p>

            <p v-else>成绩评定D：惩罚一周不能玩手机</p>

        </div>

   

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

   

        <script>

            const app = new Vue({

                el: '#app',

                data: {

                    gender:1,

                    score:80

                }

            })

        </script>

    </body>

</html>

演示截图：

（四）事件绑定指令 v-on

作用：注册时间=添加时间+提供处理逻辑

语法：

  • <button v-on:事件名="内联语句">按钮</button>

  • <button v-on:事件名="处理函数">按钮</button>

  • <button v-on:事件名="处理函数(实参)">按钮</button>

  • v-on: 简写为 @

 1.内联语句

<body><div id="app"><button v-on:click="count--">-</button><span>{{count}}</span><button v-on:click="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {count:111}})</script></body>

页面实现：

事件名也不是非要写click，可以换成别的，比如mouseenter：

<body><div id="app"><button v-on:mouseenter="count--">-</button><span>{{count}}</span><button v-on:mouseenter="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {count:111}})</script></body>

将鼠标移到“-”和“+”按钮，不用点击，就可实现加减

 简写

将v-on:这一整块换成@，也就是换成@click，同样可以实现

2.事件处理函数

内联语句只适用逻辑简单的语句，当逻辑代码多了的时候，就需要更换了

语法：

v-on:事件名 = "methods中的函数名"

注意：

  • 事件处理函数应该写到一个跟data同级的配置项（methods）中

  • methods中的函数内部的this都指向Vue实例

案例：

 在页面设置一个按钮，能够多次切换隐藏文字

<body><div id="app"><button @click="fun()">切换显示隐藏</button><h2 v-show="isShow">嘿嘿嘿</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {isShow:true},methods:{fun(){app.isShow = !app.isShow}}})</script></body>

运行结果：

把app换成this也是可以的，这样的可读性更高

  3.给事件处理函数传参

  • 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

  • 如果传递了参数，则实参 $event 表示事件对象，固定用法。

语法格式：

@click="fn(参数1,参数2)"

案例：

设置一个box，提供几个按钮，模拟买果汁，设置不同的饮料不同的价格，将每个饮料的价格参数传到事件处理函数中，更改剩余的钱的余额

<head><title>v-on指令案例</title><style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style></head><body><div id="app"><div class="box"><h2>小蔡自动售货机</h2><button @click="buy(2)">可口可乐3元</button><button @click="buy(4)">橙汁4元</button><button @click="buy(5)">咖啡5元</button></div><p>银行卡余额：{{money}}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {money:100000},methods:{buy(price){this.money-=price}}})</script></body>

运行效果;

（五）属性绑定指令v-bind

  1. 作用：动态设置html的标签属性 比如：src、url、title

  2. 语法：v-bind:属性名=“表达式”

  3. v-bind:可以简写成 => :

 案例：

动态绑定图片和一段文字

<div id="app"><img v-bind:src="url" v-bind:title="msg" alt=""></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data:{url:'./img/1.png',msg:'金木'}})</script>

运行结果：

简写

运行结果：

（六）列表渲染指令v-for

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

  • item 是数组中的每一项

  • index 是每一项的索引，不需要可以省略

  • arr 是被遍历的数组

此语法也可以遍历对象和数

  1. 作用：多次渲染整个元素（数组，数字，对象），基于数据循环
  2. 遍历数组语法：v-for="(item,index) in 数组" ​​​​

 案例：

遍历一个数组并在页面上输出

<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><div id="app"><div v-for="(item,index) in list">{{item}} - {{index}}</div></div><script>const app=new Vue({el:'#app',data:{list:['菠萝','苹果','橘子','榴莲']}})</script></body>

运行结果：

在渲染的时候我们只用到了item，那么我们是否可以省略index呢？

可以

运行结果：

1.v-for中的key

语法： key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

 实例代码：

<ul><li v-for="(item, index) in booksList" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="del(item.id)">删除</button></li>
</ul>

注意：

  1. key 的值只能是字符串 或 数字类型

  2. key 的值必须具有唯一性

  3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

区别：加key-不加key 

key的作用：给元素添加唯一标识

v-for 的默认行为会尝试 原地修改元素 （ 就地复用 ）
       当不加key删除元素的时候，程序就会直接在前几个数据里修改，比如删除第一个，那么就会把第一个元素的文字删除了，但是其他的一些属性没有删除，然后把下面的文字提上来。

（七）双向绑定指令v-model

所谓双向绑定就是：

  1. 数据改变后，呈现的页面结果会更新

  2. 页面结果更新后，数据也会随之而变

可以快速获取或设置表单元素的内容

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容

语法：v-model="变量"

需求：使用双向绑定实现以下需求

  1. 点击登录按钮获取表单中的内容

  2. 点击重置按钮清空表单中的内容  

 代码示例：

<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><div id="app">用户名：<input type="text" v-model="username"> <br><br>密码：<input type="password" v-model="password"> <br><br><button @click="login">登录</button><button @click="reset">重置</button></div><script>const app=new Vue({el:'#app',data:{username:'',password:''},methods:{login(){console.log(this.username,this.password)},reset(){this.username='',this.password=''}}})</script></body>

运行结果：

点击重置

点击登录

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

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

相关文章

记一次由docker容器使得服务器cpu占满密码和密钥无法访问bug

记一次由docker容器使得服务器cpu占满密码和密钥无法访问bug

Bug场景&#xff1a; 前几天在服务器上部署了一个免费影视网站&#xff0c;这个应用需要四个容器&#xff0c;同时之前的建站软件workpress也是使用docker部署的&#xff0c;也使用了三个容器。在使用workpress之前&#xff0c;我将影视软件的容器全部停止。 再使用workpress…
阅读更多...
【JavaEE 进阶（一）】SpringBoot(上)

【JavaEE 进阶（一）】SpringBoot(上)

博主主页: 33的博客 文章专栏分类:JavaEE ??我的代码仓库: 33的代码仓库?? ???关注我带你了解更多进阶知识 目录 1.前言2.Spring3.第一个SpringBoot程序4.Spring MVC 4.1建立连接 4.1.1RequestMapping使用 4.2请求 4.2.1传递单个参数4.2.2传递多个参数4.2.3传递一个对象…
阅读更多...
（未更新完）day30-IO-阶段综合案例（带权重的随机每日一记）（笔记完全来源于黑马程序员）

（未更新完）day30-IO-阶段综合案例（带权重的随机每日一记）（笔记完全来源于黑马程序员）

目录 0 目录一、听黑马阿玮的视频记录的笔记1. 制造假数据1.1 如何制造假数据1.2 练习1-生成方式1&#xff1a;爬取姓氏、男生名字、女生名字1.3 练习2-生成方式1&#xff1a;在练习1的基础上&#xff0c;将数据写入本地文件1.4 练习3-生成方式2&#xff1a;利用糊涂包生成假数…
阅读更多...
FPGA中所有tile介绍

FPGA中所有tile介绍

FPGA中包含的tile类型&#xff0c;以xinlinx 7k为例&#xff0c;可以通过f4pga项目中的原语文件夹查看&#xff0c;主要包含以下这些&#xff1a; 以下是您提到的 Xilinx 7 系列 FPGA 中各种模块的含义及用途&#xff1a; 1. BRAM (Block RAM) BRAM 是 FPGA 中的块存储资源&…
阅读更多...
如何解决压测过程中JMeter堆内存溢出问题

如何解决压测过程中JMeter堆内存溢出问题

如何解决压测过程中JMeter堆内存溢出问题 背景一、为什么会堆内存溢出&#xff1f;二、解决堆内存溢出措施三、堆内存参数应该怎么调整&#xff1f;四、堆内存大小配置建议 背景 Windows环境下使用JMeter压测运行一段时间后&#xff0c;JMeter日志窗口报错“java.lang.OutOfMe…
阅读更多...
嵌入式蓝桥杯学习4 lcd移植

嵌入式蓝桥杯学习4 lcd移植

cubemx配置 复制前面配置过的文件 打开cubemx&#xff0c;将PB8,PB9配置为GPIO-Output。 点击GENERATE CODE. 文件移植 1.打开比赛提供的文件包&#xff0c;点击Inc文件夹 2.点击Inc文件夹。复制fonts.h和lcd.h&#xff0c;粘贴到我们自己的工程文件夹的bsp中&#xff08…
阅读更多...
学习记录，正则表达式， 隐式转换

学习记录，正则表达式， 隐式转换

正则表达式 \\&#xff1a;表示正则表达式 W: 表示一个非字&#xff08;不是一个字&#xff0c;例如&#xff1a;空格&#xff0c;逗号&#xff0c;句号&#xff09; W: 多个非字 基本组成部分 1.字符字面量&#xff1a; 普通字符&#xff1a;在正则表达式中&#xff0c;大…
阅读更多...
标书里的“废标雷区”：你踩过几个？

标书里的“废标雷区”：你踩过几个？

在投标领域&#xff0c;标书的质量不仅决定了中标的可能性&#xff0c;更是体现企业专业度的关键。但即便是经验丰富的投标人&#xff0c;也难免会在标书编制过程中踩中“废标雷区”。这些雷区可能隐藏在技术方案的细节中&#xff0c;也可能是投标文件格式的规范问题。以下&…
阅读更多...
k8s-编写CSI插件（3）

k8s-编写CSI插件（3）

1、概述 在 Kubernetes 中&#xff0c;存储插件的开发主要有以下几种方式&#xff1a; CSI插件&#xff1a;Container Storage Interface (CSI) 是 Kubernetes 的标准插件接口&#xff0c;是全新的插件方案&#xff0c;插件和驱动调用通过grpc协议&#xff0c;功能丰富&#x…
阅读更多...
R语言机器学习论文（三）：特征提取

R语言机器学习论文（三）：特征提取

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载导入数据一、数据归一化二、离散型分类变量的编码三、筛选特征四、重要特征五、输出结果六、总结系统信息介绍 在数据分析和机器学习项目中，经常需要对数据进行预…
阅读更多...
用 NotePad++ 运行 Java 程序

用 NotePad++ 运行 Java 程序

安装包 网盘链接 下载得到的安装包: 安装步骤 双击安装包开始安装. 安装完成: 配置编码 用 NotePad 写 Java 程序时, 需要设置编码. 在 设置, 首选项, 新建 中进行设置, 可以对每一个新建的文件起作用. 之前写的文件不起作用. 在文件名处右键, 可以快速打开 CMD 窗口, 且路…
阅读更多...
Leetcode打卡：骑士在棋盘上的概率

Leetcode打卡：骑士在棋盘上的概率

执行结果&#xff1a;通过 题目&#xff1a;骑士在棋盘上的概率 在一个 n x n 的国际象棋棋盘上&#xff0c;一个骑士从单元格 (row, column) 开始&#xff0c;并尝试进行 k 次移动。行和列是 从 0 开始 的&#xff0c;所以左上单元格是 (0,0) &#xff0c;右下单元格是 (n - …
阅读更多...
[Java]项目入门

[Java]项目入门

这篇简单介绍一些入门的有关项目和行业的知识&#xff0c;并带着实现一个小项目。便于已经编程入门的各位准备进阶到下一个阶段。 先大致地介绍&#xff0c;一个完整的项目(不看客户端、服务端的分类)基本可以划分为三部分&#xff1a; 1.前端。比如你现在看到的CSDN页面就是一…
阅读更多...
全连接层与链式求导法则在神经网络中的应用

全连接层与链式求导法则在神经网络中的应用

目录 ​编辑 引言 全连接层的工作原理 前向传播 反向传播 链式求导法则及其在神经网络中的应用 链式求导法则 应用于全连接层 计算梯度 结论 引言 在深度学习领域&#xff0c;全连接层&#xff08;Fully Connected Layer&#xff0c;FC&#xff09;和链式求导法则是…
阅读更多...
泷羽Sec-星河飞雪-bp抓APP包的相关配置方法

泷羽Sec-星河飞雪-bp抓APP包的相关配置方法

免责声明 学习视频来自 B 站up主泷羽sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下代码、网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 泷羽sec官网&#xff1a;http…
阅读更多...
00. Nginx-知识网络

00. Nginx-知识网络

知识目录 语雀知识网络&#xff0c;点击“”-- 点击“”查看知识网络 01. Nginx-基础知识 02. Nginx-虚拟主机 03. Nginx-Web模块 04. Nginx-访问控制 05. Nginx-代理服务 06. Nginx-负载均衡 07. Nginx-动静分离 08. Nginx-平滑升级 09. Nginx-日志切割 10. Nginx-…
阅读更多...
【Springboot3+vue3】从零到一搭建Springboot3+vue3前后端分离项目之后端环境搭建

【Springboot3+vue3】从零到一搭建Springboot3+vue3前后端分离项目之后端环境搭建

【Springboot3vue3】从零到一搭建Springboot3vue3前后端分离项目&#xff0c;整合knef4j和mybaits实现基础用户信息管理 后端环境搭建1.1 环境准备1.2 数据库表准备1.3 SpringBoot3项目创建1.4 MySql环境整合&#xff0c;使用druid连接池1.5 整合mybatis-plus1.5.1 引入mybatie…
阅读更多...
【大数据技术基础】 课程 第3章 Hadoop的安装和使用 大数据基础编程、实验和案例教程（第2版）

【大数据技术基础】 课程 第3章 Hadoop的安装和使用 大数据基础编程、实验和案例教程（第2版）

第3章 Hadoop的安装和使用 3.1 Hadoop简介 Hadoop是Apache软件基金会旗下的一个开源分布式计算平台&#xff0c;为用户提供了系统底层细节透明的分布式基础架构。Hadoop是基于Java语言开发的&#xff0c;具有很好的跨平台特性&#xff0c;并且可以部署在廉价的计算机集群中。H…
阅读更多...
【Elasticsearch】ES+MySQL实现迷糊搜索

【Elasticsearch】ES+MySQL实现迷糊搜索

1. 技术选型 使用 Elasticsearch (ES) 结合 MySQL 进行数据存储和查询&#xff0c;而不是直接从 MySQL 中进行查询&#xff0c;主要是为了弥补传统关系型数据库&#xff08;如 MySQL&#xff09;在处理大规模、高并发和复杂搜索查询时的性能瓶颈。具体来说&#xff0c;ES 与 My…
阅读更多...
Tomcat 的使用（图文教学）

Tomcat 的使用（图文教学）

Tomcat 的使用&#xff08;图文教学&#xff09; 前言一、什么是Tomcat&#xff1f;二、Tomcat 服务器和 Servlet 版本的对应关系三、Tomcat 的使用 1、安装2、目录介绍3、如何启动4、Tomcat 的停止5、如何修改 Tomcat 的端口号6、如何部暑 web 工程到 Tomcat 中 6.1 方式一6.…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023