vue.js 常用指令攻略

 时间:2026-04-23 00:05:30

1、v-if指令

v-if是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:

v-if="expression"

expression是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式。例如:

vue.js 常用指令攻略

vue.js 常用指令攻略

2、v-show指令

v-show也是条件渲染指令,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。

vue.js 常用指令攻略

vue.js 常用指令攻略

3、v-else指令

可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

vue.js 常用指令攻略

vue.js 常用指令攻略

4、v-for指令

v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:

v-for="item in items"

items是一个数组,item是当前被遍历的数组元素。

vue.js 常用指令攻略

vue.js 常用指令攻略

vue.js 常用指令攻略

5、v-bind指令

v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class

v-bind:argument="expression"

下面这段代码构建了一个简单的分页条,v-bind指令作用于元素的class特性上。这个指令包含一个表达式,表达式的含义是:高亮当前页。

vue.js 常用指令攻略

vue.js 常用指令攻略

6、v-on指令

v-on指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听<a>元素的点击事件:

<a v-on:click="doSomething">

有两种形式调用方法:绑定一个方法(让事件指向方法的引用),或者使用内联语句。Greet按钮将它的单击事件直接绑定到greet()方法,而Hi按钮则是调用say()方法。

vue.js 常用指令攻略

vue.js 常用指令攻略

vue.js 常用指令攻略

  • vue.js语法和常用指令
  • vue.js怎样使用vue-if else
  • vue.js怎样给元素绑定事件
  • HTML怎样引入vue.js 怎样使用vue.js
  • Windows怎么下载vue.js
  • 热门搜索
    什么是财务报表 ferry是什么意思 什么洗发水对发质好 不亦说乎的意思 阴性阳性是什么意思 眼镜框什么颜色好看 边际效应是什么意思 狰狞的意思 天涯明月刀什么职业好玩 谥号是什么意思