Vue.js常用指令匯總（v-if、v-for等）

更新時(shí)間：2016年11月03日 14:52:33 作者：林小羽

這篇文章主要為大家詳細(xì)匯總了Vue.js常用指令及使用方法，包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

有時(shí)候指令太多會(huì)造成記錯(cuò)、記混的問題，所以本文在記憶的時(shí)候會(huì)采用穿插記憶的方式，交叉比對(duì)，不易出錯(cuò)。

本文主要講了一下六個(gè)指令：

v-if//v-show//v-else//v-for//v-bind//v-on

1. v-if 條件渲染指令，根據(jù)其后表達(dá)式的bool值進(jìn)行判斷是否渲染該元素；

eg:

HTML:

<div id="example01">
 <p v-if="male">Male</p>
 <p v-if="female">Female</p>
 <p v-if="age>25">Age:{{age}}</p>
 <p v-if="name.indexOf('lin')>0">Name:{{name}}</p>
</div>

JS:

var vm= new Vue({
 el:"#example01",
 data:{
 male:true,
 female: false,
 age:29,
 name:'colin'
 }
 })

頁面渲染效果：

所以，v-if指令只渲染他身后表達(dá)式為true的元素；在這里引入v-show指令，因?yàn)槎叩膮^(qū)別是v-show指令會(huì)渲染他身后表達(dá)式為false的元素，這樣的元素上會(huì)添加css代碼：style="display:none"; 將上面v-if的實(shí)例代碼改為v-show，頁面渲染效果為：

2, v-show 與v-if類似，只是會(huì)渲染其身后表達(dá)式為false的元素，而且會(huì)給這樣的元素添加css代碼：style="display:none";

3, v-else 必須跟在v-if/v-show指令之后，不然不起作用；

如果v-if/v-show指令的表達(dá)式為true，則else元素不顯示；如果v-if/v-show指令的表達(dá)式為false，則else元素顯示在頁面上；

eg:

<div id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<hr>
<h1 v-show="name.indexOf('cool') = 0">Name: {{ name }}</h1>
<h1 v-else>Sex: {{ sex }}</h1>
</div>

<script>
 var vm = new Vue({
 el: '#app',
 data: {
 age: 21,
 name: 'keepcool',
 sex: 'Male'
 }
 })
</script>

4, v-for 類似JS的遍歷，用法為 v-for="item in items", items是數(shù)組，item為數(shù)組中的數(shù)組元素。

eg:

CSS:

<style>
table,th,tr,td{
 border:1px solid #ffcccc;
 border-collapse: collapse;
 }
</style>

HTML:

<div id="example03">
 <table>
 <thead>
 <tr>
 <th>Name</th>
 <th>Age</th>
 <th>Sex</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="person in people">
 <td>{{ person.name }}</td>
 <td>{{ person.age }}</td>
 <td>{{ person.sex }}</td>
 </tr>
 </tbody>
 </table>
</div>

JS:

<script>
 var vm = new Vue({
 el: '#example03',
 data: {
 people: [{
 name: 'Jack',
 age: 30,
 sex: 'Male'
 }, {
 name: 'Bill',
 age: 26,
 sex: 'Male'
 }, {
 name: 'Tracy',
 age: 22,
 sex: 'Female'
 }, {
 name: 'Chris',
 age: 36,
 sex: 'Male'
 }]
 }
 })
</script>

頁面效果：

5, v-bind 這個(gè)指令用于響應(yīng)地更新 HTML 特性，比如綁定某個(gè)class元素或元素的style樣式。

eg,分頁功能中當(dāng)前頁數(shù)高亮的效果，可以使用bind指令。

<ul class="pagination">
 <li v-for="n in pageCount">
  <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
 </li>
 </ul>

6, v-on 用于監(jiān)聽指定元素的DOM事件，比如點(diǎn)擊事件。

eg:

<div id="example04">
 <input type="text" v-model="message">
 <button v-on:click="greet">Greet</button>
 <!-- v-on指令可以縮寫為@符號(hào)-->
 <button @click="greet">Greet Again</button>
 </div>

<script>
 var exampleData04={
 message:"Nice meeting U"
 };
 var vm2=new Vue({
 el:"#example04",
 data:exampleData04,
 methods:{
 greet:function(){
 alert(this.message);
 }
 
 }
 })
</script>

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: