vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue条件渲染列表渲染

vue条件渲染列表渲染原理示例详解

作者:小白兔zqd

这篇文章主要为大家介绍了vue条件渲染列表渲染原理示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

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>

以上就是vue条件渲染列表渲染原理示例详解的详细内容,更多关于vue条件渲染列表渲染的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文