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

vue - 指令（一）

news 2026/4/1 14:12:05

看文章可以得到什么？

1.可以快速的了解并会使用vue的指令

2.可以加深你对vue指令的理解，知道每个指令代表什么功能​​​​​​​

目录

什么是vue的指令？​​​​​​​

vue常见指令的使用  

v-html

v-show 

v-if 

v-else 和v-else-if

v-on 

v-bind 

 v-for

v-model 

案例-小黑记事本 

  • 什么是vue的指令？

指令：带有 v- 前缀 的 特殊 标签属性

vue这个框架自己规定的特殊的规范，类似于html中的自己定义p等标签

Vue 会根据不同的【指令】，针对标签实现不同的【功能】

  • vue常见指令的使用  

v-html

作用：设置元素的 innerHTML

语法：v-html = "表达式 "

v-show 

1. 作用： 控制元素显示隐藏

2. 语法： v-show = "表达式" 表达式值 true 显示， false 隐藏

3. 原理： 切换 display:none 控制

4. 场景： 频繁切换显示隐藏的场景

v-if 

1. 作用： 控制元素显示隐藏（条件渲染）

2. 语法： v-if = "表达式" 表达式值 true 显示，false 隐藏

3. 原理： 基于条件判断，是否 创建 或 移除 元素节点

4. 场景： 要么显示，要么隐藏，不频繁切换的场景

v-else 和v-else-if

1. 作用： 辅助 v-if 进行判断渲染

2. 语法： v-else v-else-if = "表达式

3. 注意： 需要紧挨着 v-if 一起使用

v-on 

1. 作用： 注册事件= 添加监听 + 提供处理逻辑

2. 语法：

① v-on:事件名 = "内联语句"

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

3. 简写：@事件名

4. 注意：methods函数内的 this 指向 Vue 实例

v-on 调用传参 

v-bind 

1. 作用： 动态的设置html的标签属性
2. 语法： v-bind:属性名="表达式"
3. 注意：

简写形式 :属性名="表达式"

小案例案例：波仔的学习之旅

需求：点击按钮，切换图片

 v-for

1. 作用： 基于数据循环， 多次渲染整个元素 → 数组、对象、数字

2. 遍历数组语法：

v-for = "(item, index) in 数组"

  • item 每一项， index 下标
  • 省略 index: v-for = "item in 数组"

  • v-for 中的 key

语法：key属性 = "唯一标识"

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

注意：

key 的值只能是 字符串 或 数字类型
key 的值必须具有 唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

如果这个属性不添加，那么在对数组进行操作的时候后重新渲染的数据会出现问题

例子：假设我们要删除下图中那个带颜色的那个li，如果不添加 ：key="" 这个属性，那么就会出现内容被删除了，但样式还在的情况

不加 :key属性的情况：

 加了 :key的属性的情况

v-model 

1. 作用: 给 表单元素 使用, 双向数据绑定 → 可以快速 获取 或 设置 表单元素内容

  • ① 数据变化 → 视图自动更新
  • ② 视图变化 → 数据自动更新

2. 语法: v-model = '变量'

案例-小黑记事本 

① 列表渲染

② 删除功能

③ 添加功能

④ 底部统计 和 清空

<!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" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body><!-- 主体区域 -->
<section id="app"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input placeholder="请输入任务" class="new-todo" v-model="todo" /><button class="add" v-on:click="add">添加任务</button></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in todoList" ><div class="view"><span class="index">{{index+1}}.</span> <label>{{item}}</label><button class="destroy" @click="del(index)"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer" v-show="todoList.length>0"><!-- 统计 --><span class="todo-count">合 计:<strong> {{todoList.length}} </strong></span><!-- 清空 --><button class="clear-completed" @click="delAll">清空任务</button></footer>
</section><!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {todoList: [],todo: ''},methods:{add(){console.log(this.todo);this.todoList.push(this.todo)console.log(this.todoList);//加入本地存储localStorage.setItem('todoList',JSON.stringify(this.todoList))this.todo = ''},delAll(){console.log('清空');this.todoList = []},render(){//读取本地数据this.todoList = JSON.parse(getItem('todoList'))},del(index){// console.log(index);// 删除指定数组元素this.todoList.splice(index,1)}}})</script>
</body>
</html>

 功能总结：

① 列表渲染：
v-for key 的设置 {{ }} 插值表达式
② 删除功能
v-on 调用传参 filter 过滤 覆盖修改原数组
③ 添加功能
v-model 绑定 unshift 修改原数组添加
④ 底部统计 和 清空
数组.length累计长度
覆盖数组清空列表
v-show 控制隐

相关文章：

vue - 指令（一）

看文章可以得到什么&#xff1f; 1.可以快速的了解并会使用vue的指令 2.可以加深你对vue指令的理解&#xff0c;知道每个指令代表什么功能​​​​​​​ 目录 什么是vue的指令&#xff1f;​​​​​​​ vue常见指令的使用 v-html v-show v-if v-else 和v-else-…...

编程日记 2024/2/6 12:56:43

正则表达式 regex

文章目录 参考 参考 https://blog.csdn.net/Conradine_Lian/article/details/108890595 regex可以很简单 也可以很复杂 /* 限定符 修饰前面的一个字符,可以是元字符* 重复0次或更多次 重…...

编程日记 2024/2/6 12:54:41

iOS自动打包如何用Python实现

在Python中实现iOS自动打包的过程需要使用第三方库和工具&#xff0c;如pyobjc和appdirs。以下是一个基本的Python脚本示例&#xff0c;用于自动打包iOS应用程序&#xff1a; python复制代码 import os import appdirs import subprocess import pyobjc # 获取应用程序目…...

编程日记 2024/2/6 12:52:39

springboot161基于springboot的公交线路查询系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…...

编程日记 2024/2/6 12:51:38

大白话介绍循环神经网络

循环神经网络实质为递归式的网络&#xff0c;它在处理时序任务表现出优良的效果&#xff0c;毕竟递归本来就是一步套一步的向下进行&#xff0c;而自然语言处理任务中涉及的文本天然满足这种时序性&#xff0c;比如我们写字就是从左到右一步步来的鸭&#xff0c;刚接触深度学习…...

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

GEE——如何利用降水数据绘制指定区域长时间序列的降水分布图和提取每个月（逐月）的降水平均数据

如何利用降水数据绘制指定区域长时间序列的降水分布图和提取每个月的指定降水数据？ 这里我们首先要做的就是选择指定的数据，进行指定年份数据的筛选，然后进行长时序数据加载，然后提取研究区内每个月指定的降水平均值，最后进行下载到谷歌云盘。其中影像集合中的每个影像都…...

编程日记 2024/2/6 12:48:35

【软件使用】【edge】如何让edge的某个网页作为应用安装

【背景】 有些常用网页希望用双击快捷方式的形式打开更加效率&#xff0c;我的浏览器主要是edge&#xff0c;研究了两种方法来实现这个需求。 【Edge自带方法】 点击Edge的右上角三点水-》应用-》将此站点作为应用安装。 点击安装&#xff0c;可以选择是否加到开始屏幕等。 …...

编程日记 2024/2/6 12:44:31

四大最受欢迎游泳耳机品牌，全球最好的游泳耳机排行榜测评

在运动耳机的领域中&#xff0c;游泳耳机已经成为热门的选择&#xff0c;尤其受到了广大游泳爱好者的喜爱。在水下运动的时候&#xff0c;通过音乐的陪伴&#xff0c;整个健身过程变得更加有趣和生动。然而&#xff0c;游泳耳机在满足音乐需求的同时&#xff0c;需要克服两个主…...

编程日记 2024/2/6 12:41:29

Linux实验记录：使用BIND提供域名解析服务

前言&#xff1a; 本文是一篇关于Linux系统初学者的实验记录。 参考书籍&#xff1a;《Linux就该这么学》 实验环境&#xff1a; VmwareWorkStation 17——虚拟机软件 RedHatEnterpriseLinux[RHEL]8——红帽操作系统 备注&#xff1a; 为了降低用户访问网络资源的门槛&am…...

编程日记 2024/2/6 12:40:27

基于单片机的智能寻光小车设计

摘 要&#xff1a;随着物联网技术的飞速发展和逐渐成熟&#xff0c;以单片机为主的智能小车在巡查、仓储、探险及国防等领域得到广泛应用。本文设计了一种基于单片机的智能寻光小车&#xff0c;该小车以STC89C52RC 芯片为设计核心&#xff0c;结合光敏传感器和超声波传感器等多…...

编程日记 2024/2/6 12:37:24

数据结构——A/复杂度

A/基础铺垫 1. 什么是数据结构&#xff1f; 数据结构(Data Structure)是计算机存储、组织数据的方式&#xff0c;指相互之间存在一种或多种特定关系的 数据元素的集合。 2.什么是算法&#xff1f; 算法(Algorithm):就是定义良好的计算过程&#xff0c;他取一个或一组的值为输…...

编程日记 2024/2/6 12:36:23

锐捷VSU和M-LAG介绍

参考网站 堆叠、级联和集群的概念 什么是堆叠&#xff1f; 框式集群典型配置 RG-S6230[RG-S6501-48VS8CQ]系列交换机 RGOS 12.5(4)B1005版本 配置指南 总结 根据以上的几篇文章总结如下&#xff1a; 级联&#xff1a;简单&#xff0c;交换机相连就叫级联&#xff0c;跟搭…...

编程日记 2024/2/6 12:35:21

MYSQL——MySQL8.3无法启动

在新电脑上装了个MySQL&#xff0c;但是无法使用net start mysql启动&#xff0c;很是纳闷&#xff0c;使用mysqld --console去查看报错&#xff0c;也是没报错的&#xff0c;但是奇怪的是&#xff0c;我输入完这个mysqld --console之后&#xff0c;就等于启动了mysql了&#x…...

编程日记 2024/2/6 12:33:19

PyTorch识别验证码

## 一、生成测试集数据pip install captcha common.py import random import time captcha_array list("0123456789abcdefghijklmnopqrstuvwxyz") captcha_size 4from captcha.image import ImageCaptchaif __name__ __main__:for i in range(10):image ImageC…...

编程日记 2024/2/6 12:24:11

手把手教你开发Python桌面应用-PyQt6图书管理系统-图书类别信息表格数据显示以及搜索实现

锋哥原创的PyQt6图书管理系统视频教程&#xff1a; PyQt6图书管理系统视频教程 Python桌面开发 Python入门级项目实战 (无废话版) 火爆连载更新中~_哔哩哔哩_bilibiliPyQt6图书管理系统视频教程 Python桌面开发 Python入门级项目实战 (无废话版) 火爆连载更新中~共计24条视频&…...

编程日记 2024/2/6 12:22:09

【HarmonyOS】鸿蒙开发之自定义组件——第3.7章

自定义构建函数 (适合内部页面的封装&#xff0c;更加合适)(构建页面) 案例: 自定义组件文件 Index.ets //全局自定义构建函数写法 Builder function item1(){Row({space:10}){Text("我是自定义构建函数")} }Component export struct Index{build(){Column(){item…...

编程日记 2024/2/6 12:20:08

初探unity中的ECS

ECS是一种软件架构模式&#xff0c;就像MVC一样。ECS最早在游戏《守望先锋》中提及到的相关链接。ECS具体是指实体&#xff08;entity&#xff09;、 组件&#xff08;component&#xff09;和系统&#xff08;system&#xff09;&#xff1a; 实体&#xff1a;实体是一个ID&a…...

编程日记 2024/2/6 12:17:05

力扣：131. 分割回文串

回溯解法思路&#xff1a; 1.先声明一个集合来接受全部的回文子串组合&#xff0c;在声明一个集合来接收单个回文子串的组合。 2.写一个回溯函数&#xff0c;里面有终止条件和遍历全部组合的for循环来进行遍历全部的组合&#xff0c;终止条件为开始索引等于字符串的长度时&am…...

编程日记 2024/2/6 12:14:01

2024美赛数学建模B题思路源码

赛题目的 赛题目的&#xff1a; 问题描述&#xff1a; 解题的关键&#xff1a; 问题一. 问题分析 要开发一个模型来预测潜水器随时间的位置&#xff0c;我们需要考虑以下几个关键因素&#xff1a; 海洋环境因素&#xff1a;当前和预测的洋流、海水密度&#xff08;可能会随…...

编程日记 2024/2/6 12:13:00

线程的取消和互斥

线程的取消 int pthread_cancel(pthread_t thread); 注意：线程的取消要有取消点才可以，不是说取消就取消，线程的取消点主要是阻塞的系统调用（前面sleep就是一个阻塞的系统调用） 如果没有取消点，手动设置一个 把上图中sleep函数替换成这个一样可以取消 void pth…...

编程日记 2024/2/6 12:06:55

Claude Code桌面控制实战：macOS开启Computer Use指南

Claude Code 的 computer use 功能&#xff0c;是 2026 年 3 月正式上线的原生 macOS 桌面控制能力&#xff0c;让 Claude 可以打开 App、点击、输入、截图&#xff0c;直接在你的真实桌面上完成 GUI 任务。它以内置 MCP 服务器的形式集成到 Claude Code CLI 中&#xff0c;通过…...

编程新知 2026/4/1 13:20:53

Phi-4-mini-reasoning快速部署：Conda环境+PyTorch2.8适配避坑指南

Phi-4-mini-reasoning快速部署&#xff1a;Conda环境PyTorch2.8适配避坑指南 1. 项目概述 Phi-4-mini-reasoning是微软推出的3.8B参数轻量级开源模型&#xff0c;专为数学推理、逻辑推导和多步解题等强逻辑任务设计。这个模型主打"小参数、强推理、长上下文、低延迟&quo…...

编程新知 2026/4/1 12:46:23

深入解析SSL/TLS握手协议：从理论到Wireshark实战分析

1. SSL/TLS协议的前世今生 每次在浏览器地址栏看到那个小锁图标&#xff0c;你有没有好奇过它背后是怎么工作的&#xff1f;这就是SSL/TLS协议在保护我们的数据安全。SSL&#xff08;安全套接层&#xff09;和它的继任者TLS&#xff08;传输层安全&#xff09;就像网络世界的&q…...

编程新知 2026/4/1 12:22:13

树莓派4B避坑指南：手把手教你安装兼容的Miniconda 4.9.2（aarch64版）

树莓派4B避坑指南&#xff1a;手把手教你安装兼容的Miniconda 4.9.2&#xff08;aarch64版&#xff09; 树莓派4B作为一款高性能的单板计算机&#xff0c;凭借其强大的aarch64架构和丰富的扩展能力&#xff0c;成为众多开发者和爱好者的首选。然而&#xff0c;在安装Miniconda这…...

编程新知 2026/4/1 12:22:13

GeographicLib：高精度大地测量计算C++库架构解析与实战指南

GeographicLib&#xff1a;高精度大地测量计算C库架构解析与实战指南 【免费下载链接】geographiclib Main repository for GeographicLib 项目地址: https://gitcode.com/gh_mirrors/ge/geographiclib GeographicLib是一个专为大地测量和地理空间计算设计的C库&#xf…...

编程新知 2026/4/1 11:41:43

**Flutter实战进阶：用自定义RenderObject打造高性能图表组件**在Flutter开发中，我们经

Flutter实战进阶&#xff1a;用自定义RenderObject打造高性能图表组件 在Flutter开发中&#xff0c;我们经常需要展示复杂的数据可视化效果&#xff0c;比如折线图、柱状图等。虽然社区已有不少成熟的图表库&#xff08;如charts_flutter&#xff09;&#xff0c;但它们往往无法…...

编程新知 2026/4/1 9:36:05

基于ELK的口罩检测日志分析与可视化

基于ELK的口罩检测日志分析与可视化 1. 引言 在公共场所部署口罩检测系统后&#xff0c;我们面临着一个新的挑战&#xff1a;如何实时监控系统运行状态、快速定位问题、并优化检测性能&#xff1f;传统的日志查看方式已经无法满足需求&#xff0c;我们需要一个能够集中管理、…...

编程新知 2026/4/1 8:34:35

快速上手语音情感分析：Emotion2Vec+系统参数配置与结果解读

快速上手语音情感分析&#xff1a;Emotion2Vec系统参数配置与结果解读 1. 系统概述与核心价值 Emotion2Vec Large语音情感识别系统是一款基于深度学习的语音分析工具&#xff0c;能够自动识别语音中蕴含的情感状态。该系统由科哥团队基于阿里达摩院ModelScope平台的原始模型进…...

编程新知 2026/4/1 8:00:03

3个核心优势让研究者实现智能OCR全场景覆盖：Pix2Text开源替代方案详解

3个核心优势让研究者实现智能OCR全场景覆盖&#xff1a;Pix2Text开源替代方案详解 【免费下载链接】Pix2Text Pix In, Latex & Text Out. Recognize Chinese, English Texts, and Math Formulas from Images. 项目地址: https://gitcode.com/gh_mirrors/pi/Pix2Text …...

编程新知 2026/4/1 7:02:22

GB28181视频监控平台EasyCVR助力景区数字化转型，打造一体化视频监控解决方案

随着文旅行业数字化转型进程持续加速&#xff0c;旅游景区的安全管理、服务优化与运营效率提升已成为行业发展的核心诉求。景区场景普遍具有面积广阔、人员流动性强等特点&#xff0c;传统监控方案存在设备兼容性差、可视化管控能力不足等诸多短板&#xff0c;难以满足当前景区…...

编程新知 2026/4/1 6:37:56