什么是vue.js指令？

什么是指令？

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

vuejs常用指令

Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：

• v-if指令

• v-show指令

• v-else指令

• v-for指令

• v-bind指令

• v-on指令

v-if指令

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素

基本语法：

v-if="expression"

expression是一个返回布尔值的表达式，表达式可以是一个布尔属性，也可以是一个返回布尔的运算式。

<div id="app">
            <div v-if="isMale">男士</div>
            <div v-if="age>=20">age:{{age}}</div>
        </div>
        
var vm = new Vue({
            el: '#app',
            data: {
                age:25,
                isMale:true,
            }
        })

v-show指令

v-show和v-if区别。

v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染

v-else指令

v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容

v-for指令

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

v-for="item in list"

list是一个数组，item是当前遍历的数组元素

v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始

v-bind指令

v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: class

class可以和v-bind:class同时存在 ，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名

v-on指令

v-on用于监听DOM事件,用法和v-bind类似，例如给button添加点击事件

<button v-on:click="show">

同样，和v-bind一样，v-on也可以使用简写，用@符号代替，修改代码：

<button @click="show">

更多vue.js相关知识，可访问 Vue.js答疑 栏目！！

以上就是什么是vue.js指令？的详细内容，更多请关注gaodaima搞代码网来源gao@dai!ma.com搞$代^码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)