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-----------------------------------------------------------------------");

目录
相关文章
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
5天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
4天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
4天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
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.
1050 0
|
5天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
11天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发