当前位置： 首页 > news >正文

Vue中常用指令——（详解，并附有代码）

news 2025/8/30 20:22:30

文章目录

  • 一.指令合集
    • 1.0 概述
    • 1.1 插值表达式
    • 1.2 v-text/v-html
    • 1.3 v-show/ v-if
    • 1.4 v-on
      • 1.4.1 内联语句
      • 1.4.2 事件处理函数
    • 1.5 v-bind
    • 1.6 Test
    • 1.7 v-for

一.指令合集

  • 内容渲染指令（v-html、v-text）
  • 条件渲染指令（v-show、v-if、v-else、v-else-if）
  • 事件绑定指令（v-on）
  • 属性绑定指令 （v-bind）
  • 双向绑定指令（v-model）
  • 列表渲染指令（v-for）

1.0 概述

  1. el:指定挂载点
  2. data提供数据

1.1 插值表达式

{{ }}：插值表达式是一种Vue的模板语法

<div id="app"><p>{{ nickname }}</p><p>{{ nickname.toUpperCase() }}</p><p>{{ nickname + '你好' }}</p><p>{{ age >= 18 ? '成年' : '未成年' }}</p><p>{{ friend.name }}</p><p>{{ friend.desc }}</p></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {nickname: 'Tom',age: 66,friend: {name: 'Tim',desc: '热爱学习java'}}})</script>

1.2 v-text/v-html

v-text（类似innerText）

  • 语法：<p v-text="username">hi</p>，意思是将 username值渲染到 p 标签中
  • 类似 innerText，使用该语法，会覆盖 p 标签原有内容

v-html（类似 innerHTML）

  • 使用语法：<p v-html="showInfo">hi</p>，意思是将 showInfo值渲染到 p 标签中
  • 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
  • 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。
<body><div id="app"><h2>个人信息</h2><p v-text="username">姓名：</p><p v-html="intro">简介：</p></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '张三',intro: '<h2>这是一个<strong>非常优秀</strong>的boy<h2>'}})</script>
</body>

1.3 v-show/ v-if

v-show

  • 作用： 控制元素显示隐藏
  • 语法： v-show = “表达式” 表达式值为 true 显示， false 隐藏
  • 原理： 切换 display:none 控制显示隐藏
  • 场景：频繁切换显示隐藏的场景

v-if

  • 作用： 控制元素显示隐藏（条件渲染）
  • 语法： v-if= “表达式” 表达式值 true显示， false 隐藏
  • 原理： 基于条件判断，是否创建 或 移除元素节点
  • 场景： 要么显示，要么隐藏，不频繁切换的场景
<style>.box {width: 200px;height: 100px;border: 1px red solid;}
</style><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="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {flag: false}})</script>
</body>

v-else 和 v-if-else

<body><div id="app"><p v-if="gender === 1">性别：♂ 男</p><p v-else>性别：♀ 女</p><hr><p v-if="score >= 90">优秀</p><p v-else-if="score >= 70">好</p><p v-else-if="score >= 60">及格</p><p v-else>不及格</p></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {gender: 2,score: 90}})</script></body>

1.4 v-on

  • <button v-on:事件名=“内联语句”>按钮
  • <button v-on:事件名=“处理函数”>按钮
  • <button v-on:事件名=“处理函数(实参)”>按钮
  • v-on: 可简写为 @

1.4.1 内联语句

    <div id="app"><!-- 内联语句 --><button @click="count--">-</button><span>{{ count }}</span><button v-on:click="count++">+</button></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100}})</script>
</body>

1.4.2 事件处理函数

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

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

  • 不传参

<body><div id="app"><button @click="fn">切换显示隐藏</button><h1 v-show="isShow">java</h1></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {isShow: true},methods: {fn() {this.isShow = !this.isShow}}})</script>
</body>
  • 传参数
<style>.box {border: 3px solid #000000;padding: 20px;margin: 20px;width: 200px;}
</style><body><div id="app"><div class="box"><button @click="buyFunctiuon(6)">面包6元</button><button @click="buyFunctiuon(3)">饮料3元</button><button @click="buyFunctiuon(9)">牛奶9元</button></div><p>余额：{{ money }}元</p></div>
</body>
<script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {money: 88},methods: {buyFunctiuon(price) {// this.money = this.money - price;this.money -= price}}})
</script>

1.5 v-bind

  • 作用：动态设置html的标签属性 比如：src、url、title
  • 语法：v-bind:属性名=“表达式”
  • v-bind:可以简写成 :
<body><div id="app"><img v-bind:src="imgUrl" :title="msg" alt=""><img :src="imgUrl" :title="msg" alt=""></div>
</body>
<script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {imgUrl: "../code/day01/imgs/10-01.png",msg: "nihao"}})
</script>

<body><div id="app"><h1 v-bind:title="message">{{ message }}</h1><button v-on:click="changeMessage">Change Message</button></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el: '#app',data: {message: 'Hello Vue!'},methods: {changeMessage: function() {this.message = 'Message has been changed!';}}});
</script>

1.6 Test

<body><div id="app"><button v-show="index > 0" @click="index--">上一个</button><img :src="list[index]" alt=""><button v-show="index<list.length-1" @click="index++">下一个</button>
</div></body>
<script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {index: 0,list: [//此处可换成自己的文件夹下的图片路径'./imgs/11-00.gif','./imgs/11-01.gif','./imgs/11-02.gif','./imgs/11-03.gif','./imgs/11-04.png','./imgs/11-05.png',]}})
</script>

1.7 v-for

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

  • item 是数组中的每一项
  • index 是每一项的索引，不需要可以省略
  • arr 是被遍历的数组
<body><div id="app"><ul><li v-for="(item,index) in list">{{item}}-{{index}}</li></ul><ul><li v-for="item in list">{{item}}</li></ul><!-- 遍历数字 --><p v-for="item in 10">{{item}}</p><!-- 遍历对象 --><div v-for="(value, key, index) in object">{{value}}</div><!--value:对象中的值 key:对象中的键index:遍历索引从0开始 --></div></body>
<script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {list: ['你', '好', '啊']}})
</script>

相关文章：

Vue中常用指令——（详解，并附有代码）

文章目录 一.指令合集1.0 概述1.1 插值表达式1.2 v-text/v-html1.3 v-show/ v-if1.4 v-on1.4.1 内联语句1.4.2 事件处理函数 1.5 v-bind1.6 Test1.7 v-for 一.指令合集 内容渲染指令&#xff08;v-html、v-text&#xff09;条件渲染指令&#xff08;v-show、v-if、v-else、v-e…...

编程日记 2024/10/12 3:22:19

redistemplate实现点赞相关功能

使用Redis的SET数据结构来存储每个实体的点赞用户ID列表&#xff0c;方便进行点赞数量的计数和用户点赞状态的检查。以下是一个小demo&#xff0c;只提供简单思路。 Service public class LikeService {Autowiredprivate RedisTemplate redisTemplate;//点赞public Long like(…...

编程日记 2024/10/12 3:21:18

C++ 算法学习——7.4.1 优化算法——双指针

双指针法&#xff08;Two Pointers&#xff09;是一种常用的算法技巧&#xff0c;通常用于解决数组或链表中的问题。这种技巧通过维护两个指针&#xff0c;通常分别指向数组或链表的不同位置&#xff0c;来协同解决问题。双指针法一般有两种类型&#xff1a;快慢指针和左右指针…...

编程日记 2024/10/12 3:19:15

镁光DDR3的命名

64M16的解释如图。 125是指一个时钟周期需要1.25ns走完&#xff0c;1us对应 1MHZ, 1ns对应1000MHZ ,那么1.25ns对应的时钟频率&#xff0c;就先用 1/1.25得到 1.25us对应的时钟频率 0.8 &#xff0c;然后再乘以1000&#xff0c;得到800就是MHZ 带宽的计算就是 800M…...

编程日记 2024/10/12 3:16:13

[Git] Git下载及使用 从入门到精通 详解（附下载链接）

前言 目录 Git概述 简介 下载 Git代码托管服务 Git常用命令 Git全局配置 获取Git仓库 在本地初始化一个Git仓库 从远程仓库克隆 基本概念 工作区文件状态 本地仓库操作 远程仓库操作 分支操作 标签操作 在IDEA中使用Git 在IDEA中配置Git 本地仓库操作 远程仓…...

编程日记 2024/10/12 3:15:11

Linux源码阅读笔记-USB驱动分析

基础层次详解 通用串行总线&#xff08;USB&#xff09;主要用于连接主机和外部设备&#xff08;协调主机和设备之间的通讯&#xff09;&#xff0c;USB 设备不能主动向主机发送数据。USB 总线采用拓扑&#xff08;树形&#xff09;&#xff0c;主机侧和设备侧的 USB 控制器&a…...

编程日记 2024/10/12 3:14:10

【超级详细解释】力扣每日一题 134.加油站 48. 旋转图像

134.加油站 力扣 这是一个很好的问题。这个思路其实基于一种贪心策略。我们从整个路径的油量变化来理解它&#xff0c;结合一个直观的“最低点法则”&#xff0c;来确保找到正确的起点。 问题的核心&#xff1a;油量差值的累积 对于每个加油站&#xff0c;我们有两个数组&…...

编程日记 2024/10/12 3:13:09

数据挖掘基本架构知识点

数据挖掘的基本架构主要包含以下几个部分&#xff1a; 一、数据获取 1. 数据源 - 可以是数据库&#xff08;如关系型数据库MySQL、Oracle等&#xff09;、文件系统&#xff08;如CSV文件、XML文件等&#xff09;、网络数据&#xff08;如网页内容、社交媒体数据&#xff09;等…...

编程日记 2024/10/12 3:12:08

LangChain中使用Prompt01

1.引入提示模板 from langchain.prompts import (SystemMessagePromptTemplate,AIMessagePromptTemplate,HumanMessagePromptTemplate, )2.设置系统提示 system_template_text"你是一位专业的翻译&#xff0c;能够将{input_language}翻译成{output_language}&#xff0c…...

编程日记 2024/10/12 3:10:06

如何使用bpmn-js实现可视化流程管理

介绍 BPMN-JS是一个流行的开源库&#xff0c;用于在Web应用程序中可视化、创建、编辑和分析BPMN&#xff08;Business Process Model and Notation&#xff0c;业务流程建模与表示法&#xff09;2.0 图。BPMN是一种国际标准的图形化语言&#xff0c;用于描述企业中的业务流程&a…...

编程日记 2024/10/12 3:09:05

【PostgreSQL 】实战篇——如何使用 EXPLAIN 和 ANALYZE 工具分析查询计划和性能，优化查询

在数据库管理中&#xff0c;优化查询性能是确保应用程序高效运行的关键因素之一。 随着数据量的不断增长和复杂查询的增多&#xff0c;理解查询的执行计划变得尤为重要。 PostgreSQL 提供了强大的工具 EXPLAIN 和 ANALYZE&#xff0c;帮助开发者分析查询计划和性能&#xff0…...

编程日记 2024/10/12 3:07:03

List、Map、Set 三个接口存取元素时，各有什么特点

List、Map、Set是Java集合框架中的三个核心接口&#xff0c;它们在存取元素时各自具有独特的特点。以下是对这三个接口存取元素特点的详细分析&#xff1a; List接口 有序性&#xff1a; List中的元素是有序的&#xff0c;它们按照插入的顺序进行排列。 可重复性&#xff1a…...

编程日记 2024/10/12 3:06:02

掌握 ASP.NET Web 开发：从基础到身份验证

ASP.NET 是微软开发的一个功能强大的框架&#xff0c;广泛用于构建现代化的 Web 应用程序。它支持 MVC 架构、Web API、Razor 语法&#xff0c;并提供完善的身份验证与授权机制。本文将介绍 ASP.NET 的基础知识、MVC 模式、Web API 开发、Razor 语法&#xff0c;以及如何实现身…...

编程日记 2024/10/12 3:00:57

【C++图文并茂】01背包问题不会？超详细的详解，看完保证你会

大家好&#xff0c;今天 给大家讲解01背包问题 有N件物品和一个容量为V的背包。第i件物品的体积是c[i]&#xff0c;价值是w[i] 。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 01背包问题是典型的动态规划问题&#xff0c;我们拿葡萄矿泉水和西…...

编程日记 2024/10/12 2:59:56

SQL自学：什么是子查询，如何使用它们

在 SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;的世界里&#xff0c;子查询是一种强大的工具&#xff0c;它允许我们在一个 SQL 查询内部嵌套另一个查询。子查询也被称为内部查询或嵌套查询&#xff0c;为我们提供了一种灵活且强大的方式…...

编程日记 2024/10/12 2:58:54

No.10 笔记 | PHP学习指南：PHP数组掌握

本指南为PHP开发者提供了一个全面而简洁的数组学习路径。从数组的基本概念到高级操作技巧&#xff0c;我们深入浅出地解析了PHP数组的方方面面。无论您是初学者还是寻求提升的中级开发者&#xff0c;这份指南都能帮助您更好地理解和运用PHP数组&#xff0c;提高编码效率和代码质…...

编程日记 2024/10/12 2:57:46

RS-232 串口通信和 RS-485 串口通信的区别

RS-232 串口通信和 RS-485 串口通信有以下区别&#xff1a; 1. 通信方式&#xff1a; RS-232&#xff1a;全双工通信方式&#xff0c;即数据的发送和接收可以同时进行。在全双工模式下&#xff0c;通信双方可以在同一时刻既发送数据又接收数据&#xff0c;就像两个人可以同时…...

编程日记 2024/10/12 2:55:44

【K8s】专题十四（1）：Kubernetes 安全机制之 RBAC

本文内容均来自个人笔记并重新梳理，如有错误欢迎指正！ 如果对您有帮助，烦请点赞、关注、转发、订阅专栏！ 专栏订阅入口 | 精选文章 | Kubernetes | Docker | Linux | 羊毛资源 | 工具推荐 | 往期精彩文章 【Docker】（全网首发）Kylin V10 下 MySQL 容器内存占用异常的解决…...

编程日记 2024/10/12 2:53:41

8. 多态、匿名内部类、权限修饰符、Object类

文章目录 一、多态 -- 花木兰替父从军1. 情境2. 小结 二、匿名内部类三、权限修饰符四、Object -- 所有类的父类(包括我们自己定义的类)五、内容出处 一、多态 – 花木兰替父从军 1. 情境 我们现在新建两个类HuaMuLan和HuaHu。HuMuLan是HuaHu的女儿&#xff0c;所以她会有她父…...

编程日记 2024/10/12 2:50:38

CentOS/Ubuntu/Debian安装LibeventCentOS安装Libevent库（含示例代码）库（含示例代码）

使用命令&#xff1a;CentOS安装Libevent库&#xff08;含示例代码&#xff09; sudo yum install libevent-devel Ubuntu/Debian: sudo apt install libevent-dev 示例代码&#xff1a; #include <stdio.h> #include <stdlib.h> #include <unistd.h> …...

编程日记 2024/10/12 2:49:36

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/7/12 23:55:04

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/8/30 17:31:45

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/7/8 18:56:27

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/8/22 3:50:41

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/8/11 21:47:18

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/8/26 1:35:23

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2025/8/27 3:10:46

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/7/18 7:59:36

人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型

在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重&#xff0c;适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解&#xff0c;并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...

编程新知 2025/8/8 13:20:37