一、v-if顯示單個元素
注意else只能跟在v-if或者v-show後面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue條件渲染</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div v-if="isDisplay"> <!--if...else... 單個元素-->
顯示我1
</div>
<div v-else>
顯示我2
</div>
</div>
<script type="text/javascript">
var myVue =new Vue({
el: ".test",
data: {
isDisplay: 1
}
})
</script>
</body>
</html>
輸出結果是:顯示我1
二、v-if顯示多個元素,需配合<template>
注意else只能跟在v-if或者v-show後面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue條件渲染</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<template v-if="isDisplay"> <!--if...else... 用template實現多個元素-->
<div>顯示我1</div>
<div>顯示我11</div>
<div>顯示我12</div>
<div>顯示我13</div>
</template>
<div v-else>
顯示我2
</div>
</div>
<script type="text/javascript">
var myVue =new Vue({
el: ".test",
data: {
isDisplay: 1
}
})
</script>
</body>
</html>
輸出結果: 顯示我1 顯示我11 顯示我12 顯示我13
三、v-show只支持單元素顯示,不支持<template>包含的多元素
注意else只能跟在v-if或者v-show後面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue條件渲染</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<div v-show="isDisplay"> <!--if...else... 單個元素,注意注意 v-show 不支持 <template> 語法-->
顯示我1
</div>
<div v-else>
顯示我2
</div>
</div>
<script type="text/javascript">
var myVue =new Vue({
el: ".test",
data: {
isDisplay: 1
}
})
</script>
</body>
</html>
四、v-if與v-show的區別
(1)v-if是真實的渲染與卸載,只不過第一次渲染後,會將結果緩存一下
(2)v-show元素始終被編譯並保留，只是簡單地基於 CSS 切換
(3)總結: 如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。