小編給大家分享一下vue.js中指令有什么作用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務(wù)有：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、安多ssl等。為成百上千企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的安多網(wǎng)站制作公司

在vue.js中，指令是帶有“v-”前綴的特殊特性，作用是：當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM；將指令綁定在元素上時(shí)，指令會(huì)為綁定的目標(biāo)元素添加一些特殊的行為。

vue.js指令是什么？作用是什么？

Vue.js指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預(yù)期是單個(gè) JavaScript 表達(dá)式 (v-for 是例外情況)。

Vue.js作用于HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時(shí)，指令會(huì)為綁定的目標(biāo)元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。

指令的作用是：當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。

Vue.js常用內(nèi)置指令

Vue.js提供了一些常用的內(nèi)置指令，接下來(lái)我們將介紹以下幾個(gè)內(nèi)置指令：

• v-if指令

• v-show指令

• v-else指令

• v-for指令

• v-bind指令

• v-on指令

v-if指令

v-if是條件渲染指令，它根據(jù)表達(dá)式的真假來(lái)刪除和插入元素
基本語(yǔ)法：
v-if="expression"
expression是一個(gè)返回布爾值的表達(dá)式，表達(dá)式可以是一個(gè)布爾屬性，也可以是一個(gè)返回布爾的運(yùn)算式。

			男士

			=20">age:{{age}}

		

		
var vm = new Vue({
			el: '#app',
			data: {
				age:25,
				isMale:true,
			}
		})

v-show指令

v-show和v-if區(qū)別。
v-show不管條件是否成立，都會(huì)渲染html,而v-if只有條件成立才會(huì)渲染

先看兩個(gè)截圖，第一個(gè)是當(dāng)isMale為true時(shí)，第二張圖是isMale為false條件不成立時(shí)，可以看到v-if的html并沒(méi)有渲染出來(lái)，
而使用v-show的p僅僅是更改了它的樣式display: none;

			男士v-if

			男士v-show

		

var vm = new Vue({
			el: '#app',
			data: {
				isMale:false
			}
		})

v-else指令

v-else指令與v-if或者v-show同時(shí)使用，v-if條件不成立則會(huì)顯示v-else內(nèi)容

			男士

			女士

		

		var vm = new Vue({
			el: '#app',
			data: {
				isMale:true
			}
		})

v-for指令

v-for指令基于一個(gè)數(shù)組渲染一個(gè)列表，它和JavaScript的遍歷語(yǔ)法相似
v-for="item in list"
list是一個(gè)數(shù)組，item是當(dāng)前遍歷的數(shù)組元素
v-for="(item,index) in list"其中index是當(dāng)前循環(huán)的索引，下標(biāo)從0開(kāi)始

			
					
					
					
					
				
			

				
序號(hào)
					
姓名
					
年齡
				
				
		

		
var vm = new Vue({
			el: '#app',
			data: {
				list:[{
					name:'章三',
					age:18
				},{
					name:'李四',
					age:23
				}]
			}
		})

v-bind指令

v-bind動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性，可以在其名稱后面帶一個(gè)參數(shù)，中間放一個(gè)冒號(hào)隔開(kāi)，這個(gè)參數(shù)通常是HTML元素的特性（attribute），如v-bind: class

class可以和v-bind:class同時(shí)存在 ，也就是說(shuō)有class了，再添加v-bind:class并不會(huì)覆蓋原來(lái)的樣式類，而是在原來(lái)基礎(chǔ)上添加新的類名

			
		

		
		var vm = new Vue({
			el: '#app',
			data: {
				img:'/upload/otherpic62/bd_logo1.png',
				isLogo:false,
				hasBorder:true
			}
		})

以上v-bind:src也可簡(jiǎn)寫(xiě)成:src,修改上面代碼

v-on指令

v-on用于監(jiān)聽(tīng)DOM事件,用法和v-bind類似，例如給button添加點(diǎn)擊事件

同樣，和v-bind一樣，v-on也可以使用簡(jiǎn)寫(xiě)，用@符號(hào)代替，修改代碼：

我們來(lái)看個(gè)例子：

以下是一個(gè)點(diǎn)擊隱藏和顯示p文本段落的代碼

			微風(fēng)輕輕的吹來(lái)，帶來(lái)了一絲絲涼意

			

				顯示

隱藏

var vm = new Vue({ el: '#app', data: { isShow:true }, methods:{ show:function(type){ if(type){ this.isShow = true; }else{ this.isShow = false; } } } })

以上是“vue.js中指令有什么作用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)標(biāo)題：vue.js中指令有什么作用
網(wǎng)頁(yè)網(wǎng)址：http://weahome.cn/article/jioojh.html