快捷導(dǎo)航

vue條件渲染列表渲染原理示例詳解

更新時(shí)間：2023年07月21日 10:19:46 作者：小白兔zqd

這篇文章主要為大家介紹了vue條件渲染列表渲染原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

Vue.js（讀音 /vju?/, 類似于 view）是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動的 web 界面的庫。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。Vue.js 的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，它讓數(shù)據(jù)與 DOM 保持同步非常簡單。

1、v-if

v-if 是根據(jù)表達(dá)式的值決定在DOM中生成或移除一個(gè)元素。如果v-if表達(dá)式賦值為false，那么對應(yīng)的元素就會從DOM中移除；否則，對應(yīng)元素的一個(gè)克隆將被重新插入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樹中顯示出來。

因?yàn)関-if是一個(gè)指令，需要將它添加到一個(gè)元素上。但是如果想切換多個(gè)元素，則可以把<template>元素當(dāng)作包裝元素，并在其上使用v-if，最終的渲染結(jié)果不會包含<template>元素。

<body>
    <div id="example">
        <template v-if="yes">
            <h1>我是標(biāo)題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

另一個(gè)根據(jù)條件展示元素的選項(xiàng)是 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 指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。 v-for 指令需要以 item in items 形式的特殊語法， items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。

<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>

以上就是vue條件渲染列表渲染原理示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue條件渲染列表渲染的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: