Vue 条件渲染 与 列表渲染

目录

一、条件渲染

[1.简介 :](#1.简介 :)

[2.v-if实例 :](#2.v-if实例 :)

[3.v-show实例 :](#3.v-show实例 :)

[4.v-if与v-show的区别 :](#4.v-if与v-show的区别 :)

二、列表渲染

[1.基本用法 :](#1.基本用法 :)

[1.1 v-for遍历数组](#1.1 v-for遍历数组)

[1.2 v-for遍历对象](#1.2 v-for遍历对象)

[2.应用实例 :](#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 的元素之后,否则它们不会被识别。

html 复制代码
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

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

html 复制代码
<h1 v-show="ok">Hello!</h1>

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

2.v-if实例 :

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

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>

运行效果 : (如下GIF图)

3.v-show实例 :

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

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>

运行效果 : (如下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标签。如下图所示 :

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


二、列表渲染

1.基本用法 :

1.1 v-for遍历数组

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

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

1.2 v-for遍历对象

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

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

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

html 复制代码
<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

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

html 复制代码
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

2.应用实例 :

vue_for.html代码如下 :

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>

运行结果 :

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

相关推荐
为将者,自当识天晓地。18 分钟前
c++多线程
java·开发语言
小政爱学习!20 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。25 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
daqinzl26 分钟前
java获取机器ip、mac
java·mac·ip
花花鱼31 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093335 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
激流丶41 分钟前
【Kafka 实战】如何解决Kafka Topic数量过多带来的性能问题?
java·大数据·kafka·topic
Themberfue1 小时前
Java多线程详解⑤(全程干货!!!)线程安全问题 || 锁 || synchronized
java·开发语言·线程·多线程·synchronized·
让学习成为一种生活方式1 小时前
R包下载太慢安装中止的解决策略-R语言003
java·数据库·r语言
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架