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

Vue常用指令及其生命周期

news 2026/2/7 21:27:18

作者：CSDN-PleaSure乐事

欢迎大家阅读我的博客 希望大家喜欢

目录

 1.常用指令

1.1 v-bind

1.2 v-model

注意事项

1.3 v-on

注意事项

1.4 v-if / v-else-if / v-else

1.5 v-show

1.6 v-for

无索引

有索引

生命周期

定义

流程

1.常用指令

Vue当中的指令是指HTML标签带有v-前缀的特殊属性，不同指令具有不同含义。

1.1 v-bind

指令：v-bind

作用：为HTML标签绑定属性值，如设置href，css样式等

<body><div id="app"><a v-bind:href="url">一个超链接</a></div><script>new Vue({el: '#app',data: {url:"https://www.baidu.com"}})</script>
</body>

 

此时我们已经完成了对超链接的设置。虽然href当中并没有直接指明跳转地址，但是我们可以通过v-bind进行动态设置跳转地址。

另外，需要注意的是，我们可以将v-bind直接简写为一个冒号，如：

<a :href="url">一个超链接</a>

这样的格式也是允许的。 

1.2 v-model

指令：v-model

作用：为表单元素创建双向数据绑定

<body><div id="app"><a v-bind:href="url">一个超链接</a><input type="text" v-model="url"></div><script>new Vue({el: '#app',data: {url:"https://www.baidu.com"}})</script>
</body>

此时我们在url当中指定的目标网址则会在输入框中跟随显示。如果我们将输入框中的网址进行改变，那么超链接的目标网址也会跟随变化：

注意事项

需要注意的是，我们在v-bind和v-model当中绑定的变量必须在数据模型中声明，即在new vue当中声明。 

1.3 v-on

指令：v-on

作用：为HTML标签绑定事件

<body><div id="app"><input type="button" value="按钮" v-on:click="show"></div><script>new Vue({el: '#app',data: {},methods: {show:function(){alert("已触发事件")}}})</script>
</body>

此时我们点击按钮，则会出发alert弹出网页显示。

注意事项

需要把定义的事件放在method当中，且v-on可以简化为@

1.4 v-if / v-else-if / v-else

指令：v-if、v-else-if、v-else

作用：条件性渲染某元素，为true时渲染，否则不渲染

<body><div id="app">年龄<input type="text" v-model="age"><span v-if="age <= 35">35岁以下</span><span v-else-if = "age>35 &&age<=60">35-60岁</span><span v-else>60岁以上</span></div><script>new Vue({el: '#app',data: {age:20}})</script>
</body>

这里我们进行判断，在age符合不同条件时会动态显示不同结果，最终效果如下：

1.5 v-show

指令：v-show

作用：根据条件展示元素，区别在于切换的是display属性的值

<body><div id="app">年龄<input type="text" v-model="age"><span v-show="age <= 35">35岁以下</span><span v-show = "age>35 &&age<=60">35-60岁</span><span v-show>60岁以上</span></div><script>new Vue({el: '#app',data: {age:20}})</script>
</body>

这里需要注意v-show和上面的v-if展现的效果类似，区别我们可以通过元素检查器发现：

v-if只展示符合的条件，而display则通过none与非none来进行区分。

1.6 v-for

指令：v-for

作用：遍历容器元素或对象属性来进行列表渲染

无索引

v-for的格式与python当中的遍历差不多，如下：

<body><div id="app"><div v-for="add in adds">{{add}}</div></div><script>new Vue({el: '#app',data: {adds:["a","b","c","d","e"]}})</script>
</body>

得到的效果如下：

 

有索引

如果我们想要插入索引，那么直接加入index即可，格式如下：

<body><div id="app"><div v-for="(add,index) in adds">{{index}} : {{add}}</div></div><script>new Vue({el: '#app',data: {adds:["a","b","c","d","e"]}})</script>
</body>

但是需要注意的是索引是从0开始，如果想要从1开始，则直接对大括号内的index进行加一操作即可，想要从其他数字开始同理。 

生命周期

定义

生命周期的定义是指一个对象从创建到销毁的过程，生命周期有如下8个阶段：

  1. 创建前：beforeCreate
  2. 创建后：created
  3. 挂载前：beforeMount
  4. 挂载完成：mounted
  5. 更新前：beforeUpdate
  6. 更新后：updated
  7. 销毁前：beforeDestroy
  8. 销毁后：destroyed

流程

作者：CSDN-PleaSure乐事

希望我的博客对您有帮助，也希望在对您有帮助时您可以为我留下点赞收藏与关注，这对我真的很重要，谢谢！

相关文章：

Vue常用指令及其生命周期

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 目录 1.常用指令 1.1 v-bind 1.2 v-model 注意事项 1.3 v-on 注意事项 1.4 v-if / v-else-if / v-else 1.5 v-show 1.6 v-for 无索引 有索引 生命周期 定义 流程 1.常用指令 Vue当中的指令…...

编程日记 2024/7/27 12:02:21

简化数据流：Apache SeaTunnel实现多表同步的高效指南

Apache SeaTunnel除了单表之间的数据同步之外&#xff0c;也支持单表同步到多表&#xff0c;多表同步到单表&#xff0c;以及多表同步到多表&#xff0c;下面简单举例说明如何实现这些功能。 单表 to 单表 一个source&#xff0c;一个sink。 从mysql同步到mysql&#xff0c;…...

编程日记 2024/7/27 11:54:13

均匀圆形阵列原理及MATLAB仿真

均匀圆形阵列原理及MATLAB仿真 目录 前言 一、均匀圆阵原理 二、圆心不存在阵元方向图仿真 三、圆心存在阵元方向图仿真 四、MATLAB仿真代码 总结 前言 本文详细推导了均匀圆形阵列的方向图函数&#xff0c;对圆心不放置阵元和圆心放置阵元的均匀圆形阵列方向图都进行了仿…...

编程日记 2024/7/27 11:47:06

vue2使用univerjs

1、univerjs Univer 提供了一个全面的企业级文档与数据协同的解决方案&#xff0c;支持电子表格、文本文档和演示幻灯片三大核心文档类型。通过灵活的 API 和插件机制&#xff0c;开发者可以在 Univer 的基础上进行个性化功能的定制和扩展&#xff0c;以适应不同用户在不同场景…...

编程日记 2024/7/27 11:46:05

VUE3 el-table-column header新增必填*

1.在需要加必填星号的el-table-column上添加render-header属性 <el-table-column :label"getName(产品代码)" :render-header"addRedStart" prop"MODELCODE" min-width“4.5%”> <template v-slot"scope"> <el-input …...

编程日记 2024/7/27 11:44:03

条件概率和贝叶斯公式

...

编程日记 2024/7/27 11:43:02

Kali中docker与docker-compose的配置

权限升级 sudo su 升级为root用户 更新软件 apt-get update安装HTTPS协议和CA证书 apt-get install -y apt-transport-https ca-certificates下载docker apt下载docker apt install docker.io 验证docker安装是否成功 查版本 docker -v 启动docker systemctl start …...

编程日记 2024/7/27 11:40:59

C++ | Leetcode C++题解之第283题移动零

题目&#xff1a; 题解&#xff1a; class Solution { public:void moveZeroes(vector<int>& nums) {int n nums.size(), left 0, right 0;while (right < n) {if (nums[right]) {swap(nums[left], nums[right]);left;}right;}} };...

编程日记 2024/7/27 11:39:59

Exponential Moving Average (EMA) in Stable Diffusion

1.Moving Average in Stable Diffusion (SMA&EMA) 1.Moving average 2.移动平均值 3.How We Trained Stable Diffusion for Less than $50k (Part 3) Moving Average 在统计学中&#xff0c;移动平均是通过创建整个数据集中不同选择的一系列平均值来分析数据点的计算。 …...

编程日记 2024/7/27 11:38:58

017、Vue动态tag标签

文章目录 1、先看效果2、代码 1、先看效果 2、代码 <template><div class "tags"><el-tag size"medium"closable v-for"item,index in tags":key"item.path":effect"item.title$route.name?dark:plain"cl…...

编程日记 2024/7/27 11:33:53

RocketMQ 架构概览

Apache RocketMQ 是一个分布式消息中间件和流计算平台&#xff0c;提供低延迟、高性能和可靠的队列服务&#xff0c;并且支持大规模的分布式系统。在详细介绍 RocketMQ 的整体架构之前&#xff0c;先了解其设计目标和核心特性是很重要的。RocketMQ 主要用于处理大规模的消息&am…...

编程日记 2024/7/27 11:31:51

优化医疗数据管理：Kettle ETL 数据采集方案详解

在现代医疗保健领域&#xff0c;数据的准确性、完整性和及时性对于提高医疗服务质量和患者护理至关重要。为了有效管理和利用医疗数据&#xff0c;Kettle ETL&#xff08;Extract, Transform, Load&#xff09;数据采集方案成为了许多医疗机构的首选工具之一。本文将深入探讨Ke…...

编程日记 2024/7/27 11:30:50

spring-from表单

在spring boot当中，from表单怎样开发（name=value) 先列出接口所需信息（抓包得到请求信息），将这些必要信息以注解的方式表达出来 步骤： 梳理前置条件（请求地址，请求header，请求方法，请求数据，响应结果）编辑一个普通类，在类上标记注解@Controller: 标记在类上,让类…...

编程日记 2024/7/27 11:29:48

【.NET】asp.net core 程序重启容器后redis无法连接，连接超时

环境是容器化部署asp.net core 程序当有大量请求打到容器如果此时重启容器会出现&#xff0c;redis无法连接情况。 使用 csredis 库报错&#xff1a; Status unavailable, waiting for recovery. Connect to server timeout 使用StackExchange.Redis 报错&#xff1a; Time…...

编程日记 2024/7/27 11:24:42

【vue前端项目实战案例】Vue3仿今日头条App

本文将开发一款仿“今日头条”的新闻App。该案例是基于 Vue3.0 Vue Router webpack TypeScript 等技术栈实现的一款新闻资讯类App&#xff0c;适合有一定Vue框架使用经验的开发者进行学习。 项目源码在文章末尾 1 项目概述 该项目是一款“今日头条”的新闻资讯App&#xf…...

编程日记 2024/7/27 11:22:38

常见的文心一言的指令

文心一言&#xff0c;作为百度研发的预训练语言模型“ERNIE 3.0”的一项功能&#xff0c;能够与人对话互动&#xff0c;回答问题&#xff0c;协助创作&#xff0c;高效便捷地帮助人们获取信息、知识和灵感。以下是一些常见的文心一言指令类型及其具体示例&#xff1a; 1. 查询…...

编程日记 2024/7/27 11:18:35

数字货币交易接口实现（含源代码）

数字货币交易接口实现&#xff08;含源代码&#xff09; 使用币安交易接口步骤1&#xff1a;注册API密钥步骤2&#xff1a;安装所需库步骤3&#xff1a;使用API进行交易获取市场数据查看账户信息执行交易错误处理安全提示 使用OKX交易接口步骤1&#xff1a;注册API密钥步骤2&am…...

编程日记 2024/7/27 11:16:33

c++函数以及函数分文件编写

1.函数 1.1格式 返回值类型 函数名 &#xff08;参数列表&#xff09;//返回值类型指的是return过去的类型 { 函数体语句 return 表达式 } 1.2常见的函数样式 1.无参返回 2.有参返回 3.无参有返 4.有参有返 #include<iostream> using namespace std; int add(int nu…...

编程日记 2024/7/27 11:15:32

【JVM基础06】——组成-直接内存详解

目录 1- 引言&#xff1a;直接内存概述1-1 直接内存是什么&#xff1f;直接内存的定义(What)1-2 为什么用直接内存&#xff1f;Java程序对直接内存的使用 (Why) 2- ⭐核心&#xff1a;详解直接内存(How)2-1 文件拷贝案例介绍对比常规 IO(BIO) 和 NIO常规 IO 的操作流程NIO 的操…...

编程日记 2024/7/27 11:14:31

学术研讨 | 区块链与隐私计算领域专用硬件研讨会顺利召开

学术研讨 近日&#xff0c;国家区块链技术创新中心主办&#xff0c;长安链开源社区支持的“区块链与隐私计算领域专用硬件研讨会”顺利召开&#xff0c;会议围绕基于区块链与隐私计算的生成式AI上链、硬件加速、软硬协同等主题展开讨论&#xff0c;来自复旦大学、清华大学、北京…...

编程日记 2024/7/27 11:12:28

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2026/1/31 10:55:22

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2026/2/3 19:38:38

「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

编程新知 2025/8/21 16:28:18

深入浅出Diffusion模型：从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

编程新知 2025/9/12 5:25:46