Vue常用指令大全（详解）

曾经终败给现在 2024-03-30 17:11 110阅读 0赞

### v-text：设置标签的内容（textContent） ###

*  默认写法会替换全部内容，使用**插值表达式\{ \{\}\}**可以替换指定内容

*  v-text的**缩写形式**为\{ \{\}\}，即差值表达式

*  内部支持写**表达式**

### v-html：设置元素的innerHTML ###

*  内容中有html结构会被解析为标签

*  v-text指令无论内容是什么，只会解析为文本

*  二者酌情选择使用

### v-on：为元素绑定事件 ###

*  事件名不需要写on，例如v-on:click

*  指令可以简写为@，例如@click，@keyup

*  绑定的方法定义在**methods**属性中

### v-show：根据真假切换元素的显示状态 ###

*  本质是修改元素的**display**，实现显示隐藏

*  指令后面的内容，最终会解析为**布尔值**

*  值为**true**元素显示，值为**false**元素隐藏

### v-if：根据真假切换元素的显示状态 ###

*  本质是通过操纵**dom元素**来切换显示状态

*  表达式的值为true，元素存在于**dom树**中，为false，从dom树中移除

*  频繁的切换用v-show,反之使用v-if，前者的切换消耗小

### v-bind：为元素绑定属性 ###

*  v-bind的作用是设置元素的属性（比如**src,title,class**）

*  完整写法是 **v-bind**:属性名

*  简写的话可以直接省略v-bind，只保留 **:属性名**

*  需要动态的增删**class**建议使用对象的形式，\{对象名:值\}

### v-for：根据数据生成列表结构 (遍历容器) ###

*  **数组**经常和v-for结合使用

*  语法是**（item,index）in 数据集合**

*  item 和 index 可以结合其他这令一起使用

*  数组长度的更新会同步到页面上，是**响应式的**

### v-on补充 ###

*  事件绑定的方法携程**函数调用**的形式，可以传入自定义参数

*  定地方法是需要定义**形参**来接收传入的实参

*  事件的后面跟上**.修饰符**可以对事件进行限制

*  如键盘事件**@keyup**的**.enter**可以限制触发的按键为回车松开

### v-model：获取和设置表单元素的值（双向数据绑定） ###

**v-model**指令的作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联，即**双向绑定**

### 补充说明 ###

通过Vue提供的指令可以对本地提供的数据进行操作，但是现在很少有纯本地的应用，或多或少都会进行网络数据的交互，感兴趣的小伙伴可以点下关注，都会进行一一详细说明！

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue常用指令大全（详解）

v-text：设置标签的内容（textContent）默认写法会替换全部内容，使用插值表达式\{ \{\}\}可以替换指定内容 v-text的缩写形式为\

曾经终败给现在/ 2024年03月30日 17:11/ 0 赞/ 111 阅读

相关 matlab常用函数与常用指令大全

<table style="width:414pt;"> <tbody> <tr> <td style="width:414pt;"> <p style="m

ゝ一纸荒年。/ 2024年03月16日 12:38/ 0 赞/ 81 阅读

相关 linux常用指令大全

1、文件目录相关指令 pwd 用于显示当前目录的路径 ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Y

淡淡的烟草味﹌/ 2023年09月29日 11:36/ 0 赞/ 36 阅读

相关命令行窗口 cmd常用指令 && cmd指令大全

CMD全称command，即命令提示符，是内置在windows图形操作系统内的磁盘操作系统，通过CMD可以方便用户查询比较复杂的信息或快速查找实现某些功能等，比如说打开文件、系

妖狐艹你老母/ 2023年07月03日 12:13/ 0 赞/ 27 阅读

相关 vue常用指令

声明一：这里列出的只是一些常用的指令，更多指令、更多细节可参考[vue中文官网][vue]。声明二：本文主要学习并整理自51CTO课程`《Vue.js 2.0之全家桶

Bertha 。/ 2023年05月30日 13:58/ 0 赞/ 14 阅读

相关 Vue常用内置指令

Vue内置指令 1、v-show 2、v-if 3、v-else-if/v-else 4、v-for 4.1 v-for遍历数据

短命女/ 2022年10月18日 15:54/ 0 赞/ 265 阅读

相关 vue指令大全

闲来无事，最近在总结笔记，也买了一本vue入的书，总结一下知识点指令： v-on指令作用：为HTML元素绑定事件监听语法：v-on：事件名称='函数名称()

女爷i/ 2022年05月23日 13:54/ 0 赞/ 326 阅读

相关 Vue 常用指令

[目录][Link 1] -------------------- 1. 前言在[Vue 模板语法][Vue] 篇中，我介绍了vue的模板语法，但是我觉

缺乏、安全感/ 2022年02月23日 05:54/ 0 赞/ 326 阅读

相关 vue指令大全

我之前学了学angular 发现angular和vue的指令有点类似先说一下 new Vue(\{ el: "\box", // element

布满荆棘的人生/ 2021年09月16日 13:14/ 0 赞/ 521 阅读

相关 vue入门及常用指令

1.安装vue 1.安装node.js，安装完node.js之后，npm也会自动安装查询是否安装成功的命令： node -v npm -

柔情只为你懂/ 2021年09月13日 15:50/ 0 赞/ 421 阅读