當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

条件渲染、列表渲染

發布時間：2025/5/22 编程问答 62 豆豆

生活随笔收集整理的這篇文章主要介紹了条件渲染、列表渲染小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vue.js（讀音 /vju?/, 類似于 view）是一個構建數據驅動的 web 界面的庫。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。Vue.js 的核心是一個響應的數據綁定系統，它讓數據與 DOM 保持同步非常簡單。

1、v-if

v-if 是根據表達式的值決定在DOM中生成或移除一個元素。如果v-if表達式賦值為false，那么對應的元素就會從DOM中移除；否則，對應元素的一個克隆將被重新插入DOM中。

<body><div id="example"><p v-if="yes">我可以被看到</p><p v-if="no">我不能被看到</p></div> </body> <script src="vue.js"></script> <script>new Vue({el:"#example",data:{yes:true,no:false}}) </script>

<p v-if="no">我不能被看到</p>不會再DOM樹中顯示出來。

因為v-if是一個指令，需要將它添加到一個元素上。但是如果想切換多個元素，則可以把<template>元素當作包裝元素，并在其上使用v-if，最終的渲染結果不會包含<template>元素。

<body><div id="example"><template v-if="yes"><h1>我是標題H1，我可以被看到</h1><p>我是段落p，我可以被看到</p><div>我是div，我可以被看到</div></template></div> </body> <script src="vue.js"></script> <script>new Vue({el:"#example",data:{yes:true,no:false,}}) </script>

2、v-show

另一個根據條件展示元素的選項是 v-show 指令。用法大體上一樣：

<body><div id="example"><p v-show="yes">我可以被看到</p><p v-show="no">我不能被看到</p></div> </body> <script src="vue.js"></script> <script>new Vue({el:"#example",data:{yes:true,no:false}}) </script>

不同的是有 v-show 的元素會始終渲染并保持在 DOM 中。<p display="none">我不能被看到</p>v-show只是切換元素的 CSS 屬性 display 。

3、v-for

我們用 v-for 指令根據一組數組的選項列表進行渲染。 v-for 指令需要以 item in items 形式的特殊語法， items 是源數據數組并且 item 是數組元素迭代的別名。

<body><ul id="example"><li v-for="(item,index) in items">{{index+1}}:{{item.message}}</li></ul> </body> <script src="vue.js"></script> <script>new Vue({el:"#example",data:{items:[{message:"xiaoming"},{message:"xiaohong"},{message:"xiaohei"}]}}) </script>

總結

以上是生活随笔為你收集整理的条件渲染、列表渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。