vue的常用指令

vue指令

下面将介绍Vue中常用的几个内置指令。当然,Vue除了内置指令,也可以根据需求自定义指令。

v-if指令

条件判断指令,根据表达式值的真假来插入或删除元素,表达式返回一个布尔值,语法如下:

v-if = "expression"

v-show指令

条件渲染指令,与v-if不同的是,无论v-show的值为true或false,元素都会存在于HTML代码中;而只有当v-if的值为true,元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值。语法如下:

v-show = "expression"

注意:v-if和v-show经常拿来对比
v-else指令

可配合v-if或v-show使用,v-else指令必须紧邻v-if或v-show,否则该命令无法正常工作。v-else绑定的元素能否渲染在HTML中,取决于前面使用的是v-if还是v-show。若前面使用的是v-if,且v-if值为true,则v-else元素不会渲染;若前面使用的是v-show,且v-show值为true,则v-else元素仍会渲染到HTML。
v-else不常用

v-for指令

循环指令,基于一个数组渲染一个列表,与JavaScript遍历类似,语法如下:

v-for = "item in items"

v-bind指令

给DOM绑定元素属性,语法如下:

v-bind:argument="expression"

v-on指令

用于监听DOM事件,语法与v-bind类似,如监听点击事件v-on:click=”doSth”。

注:v-on指令可以缩写为@符号。如:@click=”doSth”。

v-model指令
vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定,

输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化

这里写图片描述

参考:Vue.js常用指令汇总(v-if、v-for等):http://www.jb51.net/article/96422.htm
http://blog.csdn.net/yangbingbinga/article/details/61914312

发布了179 篇原创文章 · 获赞 82 · 访问量 55万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章