<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
v-if，顧名思義，條件判斷。當(dāng)?shù)玫浇Y(jié)果為true時(shí)，所在的元素才會(huì)被渲染。
v-show，當(dāng)?shù)玫浇Y(jié)果為true時(shí)，所在的元素才會(huì)被顯示。
-->
<div id="app">
<button v-on:click="show = !show">點(diǎn)我呀</button>
<!-- 1、使用v-if顯示 -->
<h1 v-if="show">if=看到我....</h1>
<!-- 2、使用v-show顯示 -->
<h1 v-show="show">show=看到我</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
????
<script>
let app = new Vue({
el: "#app",
data: {
show: true
}
})
</script>
</body>
</html>
文章來源：http://www.zghlxwxcb.cn/news/detail-659970.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="random=Math.random()">點(diǎn)我呀</button>
<span>{{random}}</span>
<h1 v-if="random>=0.75">
看到我啦？！?>=?0.75
</h1>
<h1 v-else-if="random>=0.5">
看到我啦？！?>=?0.5
</h1>
<h1 v-else-if="random>=0.2">
看到我啦？！?>=?0.2
</h1>
<h1 v-else>
看到我啦？！?<?0.2
</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
????
<script> ????????
let app = new Vue({
el: "#app",
data: { random: 1 }
}) ????
</script>
</body>
</html>
?文章來源地址http://www.zghlxwxcb.cn/news/detail-659970.html
到了這里，關(guān)于GuLi商城-前端基礎(chǔ)Vue-指令v-if、v-show、v-else、v-else-if的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![FE_Vue學(xué)習(xí)筆記 條件渲染[v-show v-if] & 列表渲染[v-for] 列表過濾 列表排序](https://imgs.yssmx.com/Uploads/2024/02/446581-1.png)
