【vue2基础教程】vue指令
文章目录
- 前言
- 一、内容渲染指令
- 1.1 v-text
- 1.2 v-html
- 1.3 v-show
- 1.4 v-if
- 1.5 v-else 与 v-else-if
- 二、事件绑定指令
- 三、属性绑定指令
- 总结
前言
Vue.js 是一款流行的 JavaScript 框架,广泛应用于构建交互性强、响应速度快的现代 Web 应用程序。Vue 指令是 Vue.js 中的一项重要特性,它们允许开发者将特定的行为应用到 HTML 元素上,从而使得 DOM 操作更加便捷和灵活。在本篇文章中,我们将介绍 Vue 指令的基础知识,帮助读者快速入门 Vue.js 开发。
一、内容渲染指令
内容渲染指令有两种:v-text和v-html
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容
1.1 v-text
- v-text(类似innerText)
- 使用语法:
<p v-text="uname">hello</p>,意思是将 uame 值渲染到 p 标签中 - 类似 innerText,使用该语法,会覆盖 p 标签原有内容
- 使用语法:
<template><div class="hello"><p v-text="uname">Hello</p></div>
</template><script>
export default {name: 'HelloWorld',data() {return {count: 0,uname:"张三"};},
}
1.2 v-html
- v-html(类似 innerHTML)
- 使用语法:
<p v-html="intro">hello</p>,意思是将 intro 值渲染到 p 标签中 - 类似 innerHTML,使用该语法,会覆盖 p 标签原有内容
- 类似 innerHTML,使用该语法,能够将HTML标签的样式呈现出来。
- 使用语法:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-html Example</title><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><!-- 使用 v-html 指令将 message 的值作为 HTML 渲染 --><div v-html="message"></div>
</div><script>
new Vue({el: '#app',data: {// 假设 message 中包含一些 HTML 标记message: '<h1>Hello, <span style="color: red;">Vue.js</span>!</h1>'}
})
</script></body>
</html>
1.3 v-show
v-show
- 作用: 控制元素显示隐藏
- 语法: v-show = “表达式” 表达式值为 true 显示, false 隐藏
- 原理: 切换 display:none 控制显示隐藏
- 场景:频繁切换显示隐藏的场景
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-show Example</title><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><!-- 使用 v-show 指令根据 isDisplayed 的值来显示或隐藏元素 --><p v-show="isDisplayed">This paragraph is shown using v-show.</p><p v-show="!isDisplayed">This paragraph is hidden using v-show.</p><!-- 使用按钮切换 isDisplayed 的值 --><button @click="toggleDisplay">Toggle Display</button>
</div><script>
new Vue({el: '#app',data: {// 控制显示和隐藏的变量isDisplayed: true},methods: {// 切换 isDisplayed 的值toggleDisplay: function() {this.isDisplayed = !this.isDisplayed;}}
})
</script></body>
</html>
1.4 v-if
v-if
- 作用: 控制元素显示隐藏(条件渲染)
- 语法: v-if= “表达式” 表达式值 true显示, false 隐藏
- 原理: 基于条件判断,是否创建 或 移除元素节点
- 场景: 要么显示,要么隐藏,不频繁切换的场景
<div v-if="flag" class="box">我是v-if控制的盒子</div>
1.5 v-else 与 v-else-if
v-else 和 v-else-if
- 作用:辅助v-if进行判断渲染
- 语法:v-else v-else-if=“表达式”
- 需要紧接着v-if使用
二、事件绑定指令
我们可以使用v-事件进行绑定事件
或者我们可以简写成@事件=xxx
我们既可以写成内联语句,也可以在下面这个图片加上method:{}
,里面写上我们的函数

我们可以进行参数的传递,可以像函数调用一个写小括号,如果没有参数则不需要写任何参数。
<!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"><title>Document</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"><h3>小黑自动售货机</h3><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button><button @click="buy(8)">牛奶8元</button></div><p>银行卡余额:{{ money }}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {money: 100},methods: {buy (price) {this.money -= price}}})</script>
</body>
</html>
三、属性绑定指令
- 作用:\动态设置html的标签属性 比如:src、url、title
- 语法:**v-bind:**属性名=“表达式”
- v-bind:\可以简写成 => ** : **
比如,有一个图片,它的 src 属性值,是一个图片地址。这个地址在数据 data 中存储。
则可以这样设置属性值:
<img v-bind:src="url" /><img :src="url" />(v-bind可以省略)
总结
本文介绍了 Vue.js 中的指令,它们是 Vue.js 框架中的重要特性之一。通过指令,我们可以直接操作 DOM,实现数据的双向绑定、条件渲染、循环渲染等功能,极大地提高了开发效率。在 Vue.js 中,指令以 v- 开头,后跟指令名称,如 v-model、v-if、v-for 等。每个指令都有特定的功能和用法,开发者可以根据需求灵活运用。通过学习和掌握 Vue 指令,可以更加高效地构建 Vue.js 应用程序,提升开发体验和用户体验。
在你开始学习和应用 Vue.js 中的指令时,建议先理解指令的基本概念和常用指令的用法,然后通过实践来加深理解。随着对 Vue.js 的熟练程度提升,你会发现指令的强大之处,并能够运用它们解决更复杂的业务需求。希望本文能够对你学习 Vue.js 提供帮助,祝愿你在 Vue.js 的学习和应用过程中取得成功!
相关文章:
【vue2基础教程】vue指令
文章目录 前言一、内容渲染指令1.1 v-text1.2 v-html1.3 v-show1.4 v-if1.5 v-else 与 v-else-if 二、事件绑定指令三、属性绑定指令总结 前言 Vue.js 是一款流行的 JavaScript 框架,广泛应用于构建交互性强、响应速度快的现代 Web 应用程序。Vue 指令是 Vue.js 中…...
P4551 最长异或路径
最长异或路径 题目描述 给定一棵 n n n 个点的带权树,结点下标从 1 1 1 开始到 n n n。寻找树中找两个结点,求最长的异或路径。 异或路径指的是指两个结点之间唯一路径上的所有边权的异或。 输入格式 第一行一个整数 n n n,表示点数…...
鸿蒙OpenHarmony HDF 驱动开发
目录 序一、概述二、HDF驱动框架三、驱动程序四、驱动配置坚持就有收获 序 最近忙于适配OpenHarmonyOS LiteOS-M 平台,已经成功实践适配平台GD32F407、STM32F407、STM32G474板卡,LiteOS适配已经算是有实际经验了。 但是,鸿蒙代码学习进度慢下…...
深度学习:如何面对隐私和安全方面的挑战
深度学习技术的广泛应用推动了人工智能的快速发展,但同时也引发了关于隐私和安全的深层次担忧。如何在保护用户隐私的同时实现高效的模型训练和推理,是深度学习领域亟待解决的问题。差分隐私、联邦学习等技术的出现,为这一挑战提供了可能的解…...
【操作系统概念】第12章:大容量存储阶段
文章目录 0.前言12.1 概述12.2磁盘结构12.3 磁盘调度12.3.1 FCFS调度12.3.2 SSTF调度12.3.3 SCAN调度12.3.4 C-SCAN调度12.3.5 如何选择磁盘调度 0.前言 文件系统从逻辑上来看包括三部分。第10章讨论了文件系统的用户和程序员的接口。第11章描述了操作系统实现这种接口的内部数…...
UE5.1_使用技巧(常更)
UE5.1_使用技巧(常更) 1. 清除所有断点 运行时忘记蓝图中的断点可能会出现运行错误的可能,务必运行是排除一切断点,逐个排查也是办法,但是在事件函数多的情况下会很复杂且慢节奏,学会一次性清除所有很有必…...
rust开发100问?
Rust如何管理内存?Rust的所有权是什么?生命周期在Rust中如何工作?什么是借用在Rust中?如何在Rust中创建枚举类型?Rust中的trait是什么?如何定义并实现一个结构体(struct)的方法&…...
.net6Api后台+uniapp导出Excel
之前的这个是vue3写法,后端是.net6Api.net6Api后台VUE3前端实现上传和下载文件全过程_vue3 下载文件-CSDN博客 在现在看来似乎搞的复杂了,本次记录一下.net6Api后台uniapp导出Excel。 后端和之前的不一样,前端也和之前的不一样,…...
【OD】算法二
开源项目热度榜单 某个开源社区希望将最近热度比较高的开源项目出一个榜单,推荐给社区里面的开发者。对于每个开源项目,开发者可以进行关注(watch)、收藏(star)、fork、提issue、提交合并请求(MR)等。 数据库里面统计了每个开源项目关注、收藏、fork、…...
《深度学习风暴:掀起智能革命的浪潮》
在当今信息时代,深度学习已经成为科技领域的一股强大力量,其应用领域涵盖了从医疗到金融再到智能交互等方方面面。随着技术的不断进步和应用的不断拓展,深度学习的发展势头愈发迅猛,掀起了一股智能革命的浪潮。本文将从基本原理、应用实例、挑战与未来发展方向、与机器学习…...
Arduin ESP32+epaper(电子墨水屏)时钟相册制作教程
Arduin ESP32 epaper(电子墨水屏)时钟相册制作教程 🔖epaper(电子墨水屏)采用的是:合宙1.54“ 电子墨水屏(e-paper)📍相关篇《Arduino框架下ESP32/ESP8266合宙1.54“ 电子墨水屏(e-paper)驱动显…...
Django模型层(附带test环境)
Django模型层(附带test环境) 目录 Django模型层(附带test环境)连接数据库Django ORM在models.py中建表允许为空指定默认值数据库迁移命令 开启测试环境建表语句补充(更改默认表名)数据的增加时间数据的时区 多表数据的增加一对多多对多 数据的删除修改数据查询数据查询所有数据…...
(AliyunAIACP17)知识点:神经网络(深度学习)分析
摘要: 案,详细阐述了神经网络的实现步骤,并提供了相应的代码示例。此外,文章还涵盖了神经网络中的技巧与实践、性能优化与测试,以及常见问题与解答。最后,对神经网络在深度学习中的应用前景进行了展望。 …...
基于 HBase Phoenix 构建实时数仓(1)—— Hadoop HA 安装部署
目录 一、主机规划 二、环境准备 1. 启动 NTP 时钟同步 2. 修改 hosts 文件 3. 配置所有主机间 ssh 免密 4. 修改用户可打开文件数与进程数(可选) 三、安装 JDK 四、安装部署 Zookeeper 集群 1. 解压、配置环境变量 2. 创建配置文件 3. 创建新…...
XS2185:八通道PSE控制器产品
八通道PSE控制器产品-XS2185 芯片特性 八通道PSE 支持标准PD供电 支持非标PD供电 每个端口功率最大30W 12位端口电流监测 12位电源电压监测 支持直流负载断开检测 支持LED供电状态指示 支持过流保护 支持短路保护 Sifos基本测试通过 32-PIN…...
Selenium WebDriver API 中涉及的一些常用方法和类
Selenium WebDriver API 是 Selenium 提供的一组方法和类,用于控制浏览器和操作 Web 元素。这些 API 提供了丰富的功能,包括但不限于: 1. **查找元素**:通过不同的定位方式(如ID、Class Name、XPath等)在页…...
OJ_复数集合
题干 C实现 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <queue> #include <string> using namespace std;struct Complex {int re;int im;//构造函数Complex(int _re, int _im) {//注意参数名字必须不同re _re;im _im;} };//结构体不支…...
【学一点RISC-V】ACLINT(高级核心本地中断控制器)文档
RISCV架构 ACLINT文档 ACLINT原文档:https://github.com/riscv/riscv-aclint/blob/main/riscv-aclint.adoc 在这里进行了翻译以及校对,仅供参考,不正确的地方欢迎指出 1、介绍 【此 RISC-V ACLINT 规范定义了一组内存映射设备,这…...
grafana table合并查询
注:本文基于Grafana v9.2.8编写 1 问题 默认情况下table展示的是一个查询返回的多个field,但是我想要的数据在不同的metric上,比如我需要显示某个pod的读写IO,但是读和写这两个指标存在于两个不同的metirc,需要分别查…...
编程笔记 html5cssjs 007 文章排版 颜真卿《述张长史笔法十二意》
编程笔记 html5&css&js 007 文章排版 颜真卿《述张长史笔法十二意》 一、代码二、解释 这段代码定义了一个古文展示页面的结构和样式,同时本文内容也是书法爱好者的珍贵资料。 一、代码 <!DOCTYPE html> <html lang"zh-CN"> <hea…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10+pip3.10)
第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10pip3.10) 一:前言二:安装编译依赖二:安装Python3.10三:安装PIP3.10四:安装Paddlepaddle基础框架4.1…...
《信号与系统》第 6 章 信号与系统的时域和频域特性
目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...
