Vue 条件渲染 与 列表渲染

简介: Vue 条件渲染与列表渲染 介绍及演示。

目录

一、条件渲染

       1.简介 :

       2.v-if实例 :

       3.v-show实例 :

       4.v-if与v-show的区别 :

二、列表渲染

       1.基本用法 :

           1.1 v-for遍历数组

           1.2 v-for遍历对象

       2.应用实例 :


一、条件渲染

       1.简介 :

      (1) Vue提供了v-if 和 v-show条件指令来完成条件渲染/控制。

       v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染,也可以用v-else添加一个"else块"。

       PS : v-else和v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后,否则它们不会被识别。

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
image.gif

       (2) v-show指令是另一个用于根据条件展示元素的选项。eg:

<h1 v-show="ok">Hello!</h1>
image.gif

       不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display注意,v-show 不支持 <template> 元素,也不支持 v-else

       2.v-if实例 :

               以“勾选复选框引起展示内容的变化”为例,vue_if.html代码如下 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if demonstration</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!--
            对checkbox类型的input标签使用v-model数据双向渲染,
            当checkbox被勾选时,point属性的值为true.
        -->
        <input type="checkbox" v-model="point"/> 你是不是OP?
        <!--
            v-if会自动去挂载的Vue实例中的data数据池中寻找对应的属性。
        -->
        <h2 v-if="point">👴就是OP怎么啦,怎么啦,op怎么你啦?</h2>
        <h2 v-else>我才不是OP呢!</h2>
    </div>
    <script type="text/javascript">
        let vm = new Vue({
            el:"#app",
            data:{
                point:false,
            }
        })
    </script>
</body>
</html>

image.gif

               运行效果 : (如下GIF图)

image.gif编辑

       3.v-show实例 :

               仍然以“勾选复选框引起展示内容的变化”为例,vue_show.html代码如下 :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-show demonstration</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app">
  <input type="checkbox" v-model="agreement"/> 你喜不喜欢吃好吃的?
  <h2 v-show="agreement">海星</h2>
  <!--
      v-show不支持v-else
  -->
  <h2 v-show="!agreement">喜欢不了一点</h2>
</div>
<script type="text/javascript">
  let vm = new Vue({
    el:"#app",
    data:{
      agreement:false,
    }
  })
</script>
</body>
</html>

image.gif

               运行效果 : (如下GIF图)

image.gif编辑

       4.v-if与v-show的区别 :

       (1)v-if会确保在切换过程中,条件块内的事件监听器和子组件真正地销毁和重建;而v-show机制相对简单,无论初始条件如何,条件块总是会被渲染并保留在DOM中,但只是对CSS样式的切换。

       (2) 由于v-if会真正的销毁和重建组件,因此v-if开销更大。若组件需要频繁地切换,建议使用v-show;若运行时条件很少改变,可以考虑使用v-if条件渲染.

               测试v-if条件渲染,在调试界面输出vm对象(创建的Vue实例),可以在挂载到的元素的childNodes属性中,找到有且仅有一个h2标签。如下图所示 :

image.gif编辑

               测试v-show条件渲染,在调试界面输出vm对象(创建的Vue实例),可以在挂载到的元素的childNodes属性中,找到有两个h2标签。如下图所示 :

image.gif编辑


二、列表渲染

       1.基本用法 :

           1.1 v-for遍历数组

       可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组(位于data数据池中),而 item 则是被迭代的数组元素的别名。(数组及数组元素的名称可以手动定义

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
image.gif
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
image.gif

image.gif 编辑

           1.2 v-for遍历对象

       也可以用 v-for 来遍历一个对象的 property(对象中定义的属性)格式为——v-for="value in object",该用法只可以取出property的值value。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
image.gif
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
image.gif

image.gif 编辑

       若想同时遍历property的键名,需要提供第二个参数作为property的键名,如下 :

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>
image.gif

image.gif 编辑

       还可以用第三个参数作为索引(注意v-for格式中小括号的使用),如下 :

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>
image.gif

image.gif 编辑

       2.应用实例 :

              vue_for.html代码如下 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for demonstration</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>(1) 渲染一个简单的无序列表(不是来自data数据池)</h3>
        <ul>
            <!-- 名称可以自主定义 -->
            <li v-for="(i,index) in 3">第{{index}}个元素---{{i}}</li>
        </ul>
        <h3>(2) v-for迭代数组</h3>
        <ul>
            <li v-for="stu in students">
                {{stu}}
            </li>
        </ul>
        <h3>(3) v-for迭代对象</h3>
        <ul>
            <li v-for="(value,name,index) in blogger">
                {{index}} -- {{name}} -- {{value}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                students: [
                    {id: 1, name: "Cyan", score: 450},
                    {id: 2, name: "Eisen", score: 446},
                    {id: 3, name: "Five", score: 439}
                ],
                blogger: {
                    name: "Cyan",
                    symbol: "RA9",
                    age: 21
                }
            }
        })
    </script>
</body>
</html>

image.gif

               运行结果 :

image.gif编辑

       System.out.println("END-----------------------------------------------------------------------");

目录
相关文章
|
2天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
1天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
7 2
|
1天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
7 2
|
1天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
2天前
|
缓存 JavaScript UED
Vue 中异步加载模块的方式
【10月更文挑战第23天】这些异步加载模块的方式各有特点和适用场景,可以根据项目的需求和架构选择合适的方法来实现模块的异步加载,以提高应用的性能和用户体验
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1043 0
|
3天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
5天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
3天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
20 9
|
2天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。