脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue条件渲染列表渲染

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

 更新时间：2023年07月21日 10:19:46   作者：小白兔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条件渲染列表渲染的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 详解vue-socket.io使用教程与踩坑记录

    详解vue-socket.io使用教程与踩坑记录

    本文主要介绍了vue-socket.io使用教程与踩坑记录，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue3中的setup执行时机与注意点说明

    Vue3中的setup执行时机与注意点说明

    这篇文章主要介绍了Vue3中的setup执行时机与注意点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • vue.js的双向数据绑定Object.defineProperty方法的神奇之处

    vue.js的双向数据绑定Object.defineProperty方法的神奇之处

    今天小编就为大家分享一篇关于vue.js的双向数据绑定Object.defineProperty方法的神奇之处，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Vue监听数据对象变化源码

    Vue监听数据对象变化源码

    这篇文章主要为大家详细介绍了Vue监听数据对象变化的源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 简单了解Vue computed属性及watch区别

    简单了解Vue computed属性及watch区别

    这篇文章主要介绍了通过实例解析Vue computed属性及watch区别,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • ElementUi中select框在页面滚动时el-option超出元素区域的问题解决

    ElementUi中select框在页面滚动时el-option超出元素区域的问题解决

    本文主要介绍了ElementUi中select框在页面滚动时el-option超出元素区域的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • vue 如何从单页应用改造成多页应用

    vue 如何从单页应用改造成多页应用

    这篇文章主要介绍了vue 如何从单页应用改造成多页应用，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
    2020-10-10
  • 在vue项目中引入scss并使用scss样式详解

    在vue项目中引入scss并使用scss样式详解

    SCSS是一种CSS预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,这篇文章主要给大家介绍了关于在vue项目中引入scss并使用scss样式的相关资料,需要的朋友可以参考下
    2022-07-07
  • 详解Vue中双向绑定原理及简单实现

    详解Vue中双向绑定原理及简单实现

    这篇文章主要为大家详细介绍了Vue中双向绑定原理及简单实现，文中的示例代码讲解详细，对我们深入了解Vue有一定的帮助，需要的可以参考一下
    2023-05-05
  • 在vue中使用 jquery 的两种方法小结

    在vue中使用 jquery 的两种方法小结

    这篇文章主要介绍了在vue中使用 jquery 的两种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08

最新评论