Vue的v-for、v-if與v-show
阿新 • • 發佈：2018-12-27
v-for
- 作用：通常是根據陣列中的元素遍歷指定模板內容生成內容
- 預期：
Array | Object | Number | String - 引數屬性
track-bystaggerenter-staggerleave-stagger
原始碼
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue</title> </head> <body> <div id="app"> <ul> <!--list迴圈--> <li v-for="item in list">{{item}}</li> <hr> <!--列印迴圈索引值,其中第一個引數是索引值，第二個引數是迴圈體內容--> <li v-for="(index,item) in list">{{index}}-{{item}}</li> <hr> <!--map迴圈--> <li v-for="item in map">{{item}}</li> <hr> <!--列印key值--> <li v-for="(key,item) in map">{{key}}-{{item}}</li> </ul> </div> </body> <!--1、匯入Vue的js檔案 --> <script src="../../../js/vue/vue/1.0/vue.js"></script> <script type="application/javascript"> var vm = new Vue({ el:'#app' ,data:{ list:[1,2,3] ,map:{ name:'zhangsan' ,age:'20' ,sex:'boy' } } }); </script> </html>
結果
分析
迴圈一為list迴圈，其是簡單的list迴圈，其主要就是遍歷迴圈中的每一項的值。
迴圈二也是list迴圈，迴圈二在簡單的迴圈一的基礎上添加了index元素索引值的展示，其第一項引數為index，第二項引數為item，它們之間的順序不能顛倒，通過{{index}}-{{item}}，我們不僅僅能夠展示元素本身的值，同時我們還能展示當前元素的索引值。
迴圈三為map迴圈，其主要是遍歷了map元素中的值。
迴圈四也是map迴圈，其除了遍歷map元素中的值之外，其還遍歷了map中每一項的key，其中(key,item)中的順序不能顛倒，第一個引數為key，第二個引數為該key
item。
v-if
- 作用：根據表示式的值的真假條件來決定是否渲染元素，如果條件為false不渲染（達到隱藏元素的目的）為true則渲染。在切換元素及它的資料繫結被銷燬並重建。
- 期望：
*
原始碼
<button @click="toggle">顯示/隱藏</button> <div v-if="isShow">Hello World 1</div> <div v-show="isShow">Hello World 2</div> var vm = new Vue({ el:'#app' ,data:{ isShow:true } ,methods:{ toggle(){ this.isShow = !this.isShow; } } });
結果
- 點選顯示
- 點選隱藏
分析
從上圖一可以看出，當點選顯示時，被v-if和v-show標記的標籤，其都能夠正常的顯示。
從圖二中我們可以看出，當點選隱藏時，v-if標記的標籤，其dom元素被徹底銷燬，而被v-show標記的標籤，其顯示樣式被標記為display: none;
v-show
- 作用：根據表示式的真假值，切換元素的display CSS屬性，如果為false，則在元素上新增display：none來隱藏元素，否則移除display：none實現顯示元素。
- 期望：
*
由於v-show中的程式碼已經寫在了v-if中，所以說這裡就不用重複編寫了。
完整程式碼
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<ul>
<!--list迴圈-->
<li v-for="item in list">{{item}}</li>
<hr>
<!--列印迴圈索引值,其中第一個引數是索引值，第二個引數是迴圈體內容-->
<li v-for="(index,item) in list">{{index}}-{{item}}</li>
<hr>
<!--map迴圈-->
<li v-for="item in map">{{item}}</li>
<hr>
<!--列印key值-->
<li v-for="(key,item) in map">{{key}}-{{item}}</li>
</ul>
<hr>
<button @click="toggle">顯示/隱藏</button>
<div v-if="isShow">Hello World 1</div>
<div v-show="isShow">Hello World 2</div>
</div>
</body>
<!--1、匯入Vue的js檔案 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
list:[1,2,3]
,map:{
name:'zhangsan'
,age:'20'
,sex:'boy'
}
,isShow:true
}
,methods:{
toggle(){
this.isShow = !this.isShow;
}
}
});
</script>
</html>