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

vue中常见的指令

news 2026/5/13 8:05:45

简单介绍一下常见的vue中用到的指令

v-on

指定当前的事件，语法糖为@，如例子所示，指定按钮的事件为addCounter，点击会使变量counter + 1

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">		{{ counter }}<button @click="addCounter">+1</button></div><script>const App = {data() {return {counter: 0}},methods: {addCounter() {this.counter ++;}}};Vue.createApp(App).mount('#app');</script></body>
</html>

v-html

会将输出的文本解析为html

v-text

会将变量解析为文本

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">		<p v-text="msg"></p><p v-html="msg"></p></div><script>const App = {data() {return {msg: '<b>1</b>'}}};Vue.createApp(App).mount('#app');</script></body>
</html>

在这里插入图片描述

v-if v-show

都可以控制元素的显示，v-show 不管显示不显示，元素都会被加载，使用的css的display属性去控制元素，v-if如果不显示的话，元素会在编译的时候被去除.

<p v-html=“msg” v-if=“displayFlg”>

v-for

用户循环变量的显示，以及列表数据的显示。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">		<p v-for="(val,index) in arrayText">{{index}} -- {{val}} </p></div><script>const App = {data() {return {arrayText: ['蛮子', '寒冰', '剑圣']}}};Vue.createApp(App).mount('#app');</script></body>
</html>

在这里插入图片描述

v-bind

用于绑定元素的属性，如下图给img标签绑定了src属性

		<div id="app">		<img v-bind:src="imgsrc"/></div><script>const App = {data() {return {imgsrc: 'img/1.jpg'}}};Vue.createApp(App).mount('#app');</script>

v-model

用于绑定表单元素的值，改变表单中的值，也会改变对应的属性值

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><input  type="text" v-model="text"/><p>{{text}}</p></div><script>const App = {data() {return {text: 'Hi好'}}};Vue.createApp(App).mount('#app');</script></body>
</html>

在这里插入图片描述

v-pre

跳过元素的vue编辑

v-once

只加载一次，后续改变不在渲染

v-cloak

用于元素未完全加载时候，不显示。需要配合css来使用。

[v-cloak] {
display: none;
}

vue中常见的指令

简单介绍一下常见的vue中用到的指令 v-on 指定当前的事件，语法糖为，如例子所示，指定按钮的事件为addCounter，点击会使变量counter 1 <!DOCTYPE html> <html><head><meta charset"utf-8" />…...

编程日记 2024/1/1 6:12:24

单片机原理及应用：开关控制LED多种点亮模式

从这篇文章开始，我们不再只研究单一的外设工作，而是将LED、数码管、开关、按键搭配在一起研究，这篇文章主要介绍LED和开关能擦出怎样的火花，同时也介绍一些函数封装的知识。由于开关有闭合与打开两种状态，LED有左移流…...

编程日记 2024/1/1 6:09:22

你真的了解UVM sequence的运行机制吗

1. 前言 UVM在sequence里提供了很多的callback方法给用户，从而更灵活地完成各种复杂场景的交互和控制执行顺序。我们可能在很多情况下只使用了body()方法，本文将介绍sequence里常见的callback方法，以及在不同场景下，它们的是否被…...

编程日记 2024/1/1 6:06:19

Bug升级记

2023.12.28 （1) 小程序session_key泄露隐患核心：session_key这个字段及对应值不应该传到小程序客户端等服务器外的环境错误操作：直接在小程序调用https://api.weixin.qq.com/sns/jscode2session并将session_key作为参数进行明文传输正确操…...

编程日记 2024/1/1 6:01:15

爬虫详细教程第1天

爬虫详细教程第一天 1.爬虫概述1.1什么是爬虫？1.2爬虫工具——Python1.3爬虫合法吗？1.4爬虫的矛与盾1.4.1反爬机制1.4.2反爬策略1.4.3robots.txt协议 2.爬虫使用的软件2.1使用的开发工具: 3.第一个爬虫4.web请求4.1讲解一下web请求的全部过程4.2页面渲染…...

编程日记 2024/1/1 6:00:14

[Linux] MySQL数据库的备份与恢复

一、数据库备份的分类和备份策略 1.1 数据库备份的分类 1）物理备份物理备份：对数据库操作系统的物理文件（如数据文件、日志文件等）的备份。物理备份方法： 冷备份(脱机备份) ：是在关闭数据库的时候进…...

编程日记 2024/1/1 5:58:12

Django3.0升级到4.1，Python3.8升级到3.11.6问题大汇总报错1：ERROR: Could not build wheels for cffi, uWSGI, which is required to install pyproject.toml-based projects ERROR: Could not build wheels for cffi, uWSGI, which is required to install pyproject.tom…...

编程日记 2024/1/1 5:51:07

2023-12-30 AIGC-LangChain介绍

摘要: 2023-12-30 AIGC-LangChain介绍 LangChain介绍 1. https://youtu.be/Ix9WIZpArm0?t353 2. https://www.freecodecamp.org/news/langchain-how-to-create-custom-knowledge-chatbots/ 3. https://www.pinecone.io/learn/langchain-conversational-memory/ 4. https://de…...

编程日记 2024/1/1 5:50:06

pytorch01：概念、张量操作、线性回归与逻辑回归

目录一、pytorch介绍1.1pytorch简介1.2发展历史1.3pytorch优点二、张量简介与创建2.1什么是张量？2.2Tensor与Variable2.3张量的创建2.3.1 直接创建torch.tensor()2.3.2 从numpy创建tensor 2.4根据数值创建2.4.1 torch.zeros()2.4.2 torch.zeros_like()2.4.3 torch…...

编程日记 2024/1/1 5:49:05

storyBook play学习

场景在官方给出的案例中， Page.stories.js import { within, userEvent } from storybook/testing-library import MyPage from ./Page.vueexport default {title: Example/Page,component: MyPage,parameters: {// More on how to position stories at: https:/…...

编程日记 2024/1/1 5:45:01

Android Matrix画布Canvas旋转Rotate，Kotlin

Android Matrix画布Canvas旋转Rotate，Kotlin private fun f1() {val originBmp BitmapFactory.decodeResource(resources, R.mipmap.pic).copy(Bitmap.Config.ARGB_8888, true)val newBmp Bitmap.createBitmap(originBmp.width, originBmp.height, Bitmap.Config.…...

编程日记 2024/1/1 5:44:00

私有部署ELK，搭建自己的日志中心（三）-- Logstash的安装与使用

一、部署ELK 上文把采集端filebeat如何使用介绍完，现在随着数据的链路，继续~~ 同样，使用docker-compose部署： version: "3" services:elasticsearch:container_name: elasticsearchimage: elastic/elasticsearch:7.9…...

编程日记 2024/1/1 5:41:58

2023就这样过去了，2024会更好吗？

2023年，不是很好 2023年是疫情后的第一年，疫情过去了，大家都有大多的希望，希望经济可以恢复，希望信心可以恢复，但是整体都是远远低于预期的。年初的一片热潮，年中的一片哀嚎，年底基…...

编程日记 2024/1/1 5:39:56

SpringBoot加载配置的6种方式

从配置文件中获取属性应该是SpringBoot开发中最为常用的功能之一，简单回顾一下这六种的使用方式： 说明Environment对象Environment是springboot核心的环境配置接口，它提供了简单的方法来访问应用程序属性，包括系统属性、操作系统…...

编程日记 2024/1/1 5:38:55

大语言模型（LLM）训练平台与工具

LLM 是利用深度学习和大数据训练的人工智能系统，专门设计来理解、生成和回应自然语言。大模型训练平台和工具提供了强大且灵活的基础设施，使得开发和训练复杂的语言模型变得可行且高效。平台和工具提供了先进的算法、预训练模型和优化技术&#xff0c…...

编程日记 2024/1/1 5:35:52

docker配置buildx插件

一、介绍 Docker buildx是docker的一个插件支持Moby BuildKit的所有特性可以跨CPU架构编译镜像可以在多节点编译镜像二、前提使用 buildx 作为 docker CLI 插件需要使用 Docker 19.03 或更新版本。三、配置步骤 1）客户端：在客户端的配置文…...

编程日记 2024/1/1 5:33:49

mysql 空间函数

ST_GeomFromText：将文本表示的几何对象转换为几何对象。 SELECT ST_GeomFromText(POINT(1 1)); ST_AsText：将几何对象转换为文本表示。 SELECT ST_AsText(ST_GeomFromText(POINT(1 1))); ST_Contains：判断一个几何对象是否包含另一个几何对象…...

编程日记 2024/1/1 5:31:48

vscode调试反汇编c/c++ 查看汇编代码gdb/lldb

先看下流程！ 先看下流程！ 有问题请留言！ 文章目录必备F5开启调试左侧侧边栏->确保打开回调栈右键函数栈->查看反汇编方法二：手动输入命令查看必备使用c/c 插件，这应该是必备的。 F5开启调试左侧侧边栏-&…...

编程日记 2024/1/1 5:27:44

总结项目中oauth2模块的配置流程及实际业务oauth2认证记录（Spring Security）

文章目录简单示例添加oauth2的依赖配置认证服务器配置资源服务器配置安全使用http或者curl命令测试实际业务中工具类（记录）：认证服务器资源服务器、配置安全用户验证登录控制层配置文件application.yml 项目中用过的spring security&#x…...

编程日记 2024/1/1 5:26:43

传感器原理与应用复习

测量与误差传感器原理与应用复习—测量概述与测量误差传感器特性与应变式传感器传感器原理与应用复习–传感器基本特性与应变式传感器电感式传感器传感器原理与应用复习–电感式传感器电容式与电压式传感器传感器原理与应用复习–电容式与压电式传感器电磁式与…...

编程日记 2024/1/1 5:25:41

Gentoo Linux 中通过 Overlay 优雅安装 Cursor 二进制编辑器

1. 项目概述与背景如果你是一名 Gentoo Linux 的用户，同时又对 Cursor 这款新兴的 AI 代码编辑器感兴趣，那么你很可能已经遇到了一个经典的 Gentoo 式难题：如何在这样一个以源码编译为核心的发行版上，方便地安装一个官方只提供.de…...

编程新知 2026/5/13 7:38:56

基于RAG与向量数据库的本地化个人知识库构建实践

1. 项目概述：一个为个人量身定制的知识库构建引擎如果你和我一样，每天在浏览器、笔记软件、PDF文档和各种聊天记录之间疲于奔命，试图抓住那些一闪而过的灵感和零散的知识点，那么你肯定理解“知识碎片化”的痛苦。我们收藏了无数…...

编程新知 2026/5/13 6:18:56

5分钟快速上手：XUnity.AutoTranslator游戏翻译插件完整教程

5分钟快速上手：XUnity.AutoTranslator游戏翻译插件完整教程【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 还在为外语游戏的语言障碍而烦恼吗？XUnity.AutoTranslator是一款强大的…...

编程新知 2026/5/13 5:16:48

如何实现Airbyte动态服务发现：从基础到实践的完整指南

如何实现Airbyte动态服务发现：从基础到实践的完整指南【免费下载链接】airbyte Open-source data movement for ELT pipelines and AI agents — from APIs, databases & files to warehouses, lakes, and AI applications. Both self-hosted and Cloud. 项目…...

编程新知 2026/5/13 4:59:44

OpenManus-RL：基于强化学习优化大语言模型智能体决策的完整框架

1. 项目概述与核心价值如果你正在关注大语言模型智能体领域，尤其是如何让模型从“会聊天”进化到“会做事”，那么OpenManus-RL这个项目绝对值得你投入时间研究。它不是一个简单的工具库，而是一个由UIUC-Ulab和MetaGPT团队联合发起的、以直播形…...

编程新知 2026/5/13 3:45:13

MSP 盈利、留客、提口碑，核心就盯这12个 KPI

很多 MSP（托管服务提供商）都会陷入一个误区，手里握着一堆散落在各个看板的运营数据，却始终搞不清哪些指标能真正帮自己提升服务质量、拉高利润、留住客户。忙忙碌碌做了一堆报表，最终还是凭感觉做决策，业务…...

编程新知 2026/5/13 3:45:13

oh-my-prompt：打造高效终端提示符的模块化方案与实战配置

1. 项目概述：为什么我们需要一个现代化的终端提示符？如果你和我一样，每天有超过一半的工作时间是在终端（Terminal）里度过的，那么终端提示符（Prompt）就是你最熟悉的“工作台面”。默认…...

编程新知 2026/5/13 3:24:06

技术人必备的Chrome插件清单：第7个让调试效率翻倍

对于软件测试从业者而言，浏览器早已不是单纯的信息浏览窗口，而是集接口调试、性能分析、元素定位、辅助功能验证于一体的核心工作站。面对日益复杂的Web应用和紧迫的交付周期，一套精悍的Chrome插件组合往往能带来远超预期的效率回报。本文从测…...

编程新知 2026/5/13 2:40:47

国产替代之SFT1452-H与VBFB1251K参数对比报告

N沟道功率MOSFET参数对比分析报告一、产品概述SFT1452-H：安森美（onsemi）N沟道功率MOSFET，耐压250V，低导通电阻，ESD门极保护，符合无卤素标准。封装：IPAK (TO-251)。适用于通用开关应用…...

编程新知 2026/5/13 0:59:05

Python蒙特卡洛树搜索实战：手把手教你调参，让黑白棋AI从‘菜鸟’变‘高手’

Python蒙特卡洛树搜索实战：从调参到策略优化的完整指南蒙特卡洛树搜索（MCTS）作为近年来最成功的游戏AI算法之一，已经在围棋、黑白棋等策略游戏中展现出惊人的实力。但很多开发者在实现基础版本后，常常陷入性能瓶颈——…...

编程新知 2026/5/13 0:40:35

v-on

v-html

v-text

v-if v-show

v-for

v-bind

v-model

v-pre

v-once

v-cloak

相关文章：