Vue中常用指令v-if, v-for, v-show,v-else, v-bind, v-on有什么用

這篇文章給大家分享的是有關(guān)Vue中常用指令v-if, v-for, v-show,v-else, v-bind, v-on有什么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

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

Vue.js提供了一些常用的內(nèi)置指令，如下：

v-if指令

v-for指令

v-show指令

v-else指令

v-bind指令

v-on指令

1：v-if指令

v-if指令是條件渲染指令，它根據(jù)表達(dá)式的真假來刪除和插入元素，它的基本語法如下：

v-if="expression"

expression是一個(gè)返回布爾值的表達(dá)式，表達(dá)式可以是一個(gè)布爾值屬性，也可以是一個(gè)返回布爾值的運(yùn)算式。

Eg:

 <div id="app">
  <h2>Hello, Vue.js!</h2>
  <h2 v-if="yes">Yes!</h2>
  <h2 v-if="no">No!</h2>
  <h2 v-if="age >= 18">Age: {{ age }}</h2>
  <h2 v-if="name.indexOf('li') >= 0">Name: {{ name }}</h2>
 </div>
 var app= new Vue({
  el: '#app',
  data: {
  yes: true,
  no: false,
  age: 20,
  name: 'lililili'
  }
 })

        //數(shù)據(jù)的yes屬性為true，所以"Yes!"會(huì)被輸出；

//數(shù)據(jù)的no屬性為false，所以"No!"不會(huì)被輸出；

//運(yùn)算式age >= 18返回true，所以"Age: 28"會(huì)被輸出；

//運(yùn)算式name.indexOf('li') >= 0返回false，所以"Name: lililili"會(huì)被輸出。

V-if只能控制一個(gè)元素上的是否顯隱，對(duì)于多個(gè)元素控制我們可以使用一個(gè)template元素實(shí)現(xiàn)

在vue中我們想使用條件模板直接在dom元素上使用v-if指令，v-if指令的值表示vue實(shí)例對(duì)象上的數(shù)據(jù)值

Tempalte是vue提供的一個(gè)自定義元素，寫在這個(gè)里面的 元素會(huì)根據(jù)template v-if屬性來控制顯隱，在渲染以后這個(gè)元素會(huì)被vue刪除掉，（v-if指令元素保留）

<div id="app">
<template v-if="type">
<span>{{type}}</span> <span> | </span>
</template>
<strong>{{title}}</strong>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 數(shù)據(jù)
var data = {
title: '哈哈哈',
type: '科技'
}
var app = new Vue({
el: '#app',
data: data
})

2：v-for指令

v-for指令基于一個(gè)數(shù)組渲染一個(gè)列表，它和JavaScript的遍歷語法相似：

v-for="item in items"

items是一個(gè)數(shù)組，item是當(dāng)前被遍歷的數(shù)組元素。

Eg:

<ul id="app">
<li v-for="item in list">{{item}}</li>
</ul>
/var data = [
'快樂大本營',
'奔跑吧兄弟',
'極限挑戰(zhàn)'
]
var app = new Vue({
el: '#app',
data: {
list: data
}
})

與v-if一樣v-for也可以應(yīng)用在template元素上，此時(shí)可以實(shí)現(xiàn)對(duì)多組元素的for循環(huán)

Eg:

<ul id="app">
<template v-for="item in list">
<li>
<span v-if="item.type">{{item.type}} | </span>
<strong>{{item.title}}</strong>
</li>
<br>
</template>
</ul>
var data = [
{
type: '湖南',
title: '快樂大本營'
},
{
type: '浙江',
title: '奔跑吧兄弟'
},
{
type: '東方',
title: '極限挑戰(zhàn)'
}
]
var app = new Vue({
el: '#app',
data: {
list: data
}
})

3:v-show指令

v-show也是條件渲染指令，控制元素顯隱，和v-if指令不同的是，使用v-show指令的元素始終會(huì)被渲染到HTML，它只是簡單地為元素設(shè)置CSS的style屬性。

V-if是false會(huì)將元素在dom文檔中刪除

V-show是false是將元素的display設(shè)置none

V-if會(huì)刪除元素，v-show只是做樣式顯隱，會(huì)保留頁面中

4:v-else指令

可以用v-else指令為v-if或v-show添加一個(gè)“else塊”。v-else元素必須立即跟在v-if或v-show元素的后面——否則它不能被識(shí)別。

v-else元素是否渲染在HTML中，取決于前面使用的是v-if還是v-show指令。

v-if為true，后面的v-else不會(huì)渲染到HTML；v-show為tue，但是后面的v-else渲染到HTML。

5:v-bind指令

v-bind指令可以在其名稱后面帶一個(gè)參數(shù)，中間放一個(gè)冒號(hào)隔開，這個(gè)參數(shù)通常是HTML元素的特性（attribute），例如：v-bind:class=”''

v-bind:argument="expression"

6:v-on指令

v-on指令用于給監(jiān)聽DOM事件，它的用語法和v-bind是類似的，例如監(jiān)聽<a>元素的點(diǎn)擊事件：

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

語法：V-on:click=“事件回調(diào)函數(shù)的名稱”

定義事件的回調(diào)函數(shù)，在vue的實(shí)例化對(duì)象的methods屬性中定義

Methods他的值是一個(gè)對(duì)象

對(duì)象是屬性名稱表示事件的回調(diào)函數(shù)名稱

對(duì)象的屬性值是一個(gè)函數(shù)，就是事件的回調(diào)函數(shù)

他的this指向的是vue實(shí)例化對(duì)象，因此通過它我們可以獲取或者設(shè)置vue實(shí)例化對(duì)象上屬性

它默認(rèn)有個(gè)參數(shù)是事件對(duì)象，這個(gè)事件對(duì)象可以訪問該事件的相關(guān)信息$event傳遞參數(shù)可以訪問到事件對(duì)象

當(dāng)我們?cè)谑褂檬录r(shí)候，可以傳遞一些參數(shù)，此時(shí)在vue的事件回調(diào)函數(shù)中它的參數(shù)與事件使用時(shí)候傳入的參數(shù)是一致的

<input type="text" v-model="msg">
<button v-on:click="showTitle(msg, $event, 'hello')">btn</button>
<button v-on:click="showTitle">btn2</button>
<h2>{{title}}</h2>
var app = new Vue({
el: '#app',
data: {
title: '',
msg: ''
},
methods: {
// 屬性名稱表示回調(diào)函數(shù)的名稱
showTitle: function () {
// console.log(this)
// console.log(arguments) 傳的參數(shù)都能訪問到 msg, $event, 'hello'
// 通過this訪問vue實(shí)例化對(duì)象上的其他屬性和方法。Data.title data.aa
this.title = '快樂大本營';
},
aa: function () {
}
}
})

感謝各位的閱讀！關(guān)于“Vue中常用指令v-if, v-for, v-show,v-else, v-bind, v-on有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！