脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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的MVVM实现方法

    Vue的MVVM实现方法

    本篇文章主要主要介绍了Vue的MVVM实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 前端Vue3项目打包成Docker镜像运行的详细步骤

    前端Vue3项目打包成Docker镜像运行的详细步骤

    将Vue3项目打包、编写Dockerfile、构建Docker镜像和运行容器是部署Vue3项目到Docker的主要步骤,这篇文章主要介绍了前端Vue3项目打包成Docker镜像运行的详细步骤,需要的朋友可以参考下
    2024-09-09
  • vue之a-table中实现清空选中的数据

    vue之a-table中实现清空选中的数据

    今天小编就为大家分享一篇vue之a-table中实现清空选中的数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • npm install -g @vue/cli安装vue脚手架报错问题(一般都能解决)

    npm install -g @vue/cli安装vue脚手架报错问题(一般都能解决)

    这篇文章主要介绍了npm install -g @vue/cli安装vue脚手架报错问题(一般都能解决),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue 大文件上传和断点续传的实现

    Vue 大文件上传和断点续传的实现

    文件上传在很多项目中都用的到，如果是几M的很快就传送完毕，如果是大文件呢？本文就介绍了Vue 大文件上传和断点续传的实现，感兴趣的可以了解一下
    2021-06-06
  • vue prop传值类型检验方式

    vue prop传值类型检验方式

    这篇文章主要介绍了vue prop传值类型检验方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 常见的5种Vue组件通信方式总结

    常见的5种Vue组件通信方式总结

    在 Vue.js 中,组件通信是开发过程中非常重要的一部分,它涉及到不同组件之间的数据传递和交互,本文将介绍如何实现父子组件之间的有效通信,并盘点了常见的5种Vue组件通信方式总结,需要的朋友可以参考下
    2024-03-03
  • vue中使用/deep/失效的解决方法

    vue中使用/deep/失效的解决方法

    这篇文章主要介绍了vue中使用/deep/失效的解决办法,使用了css预处理器，则可以使用/deep/， 如果/deep/ 无效，则使用 ::v-deep，本文给大家讲解的非常详细需要的朋友可以参考下
    2022-11-11
  • Vue.js进行查询操作的实例详解

    Vue.js进行查询操作的实例详解

    这篇文章主要介绍了Vue.js进行查询操作的实例详解的相关资料,需要的朋友可以参考下
    2017-08-08
  • 详解vue项目中使用vuedraggable

    详解vue项目中使用vuedraggable

    这篇文章主要介绍了vue项目中使用vuedraggable,本文给大家介绍了错误问题分析及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05

最新评论