03Vue.js快速入门-Vue列表渲染及条件渲染实战

简介: 3.1. 条件渲染有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作。最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据。如果有数据就显示表格数据。 Vue帮我们提供了一个v-if的指令,帮助我们完成判断的模板处理。

3.1. 条件渲染

有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作。最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据。如果有数据就显示表格数据。 Vue帮我们提供了一个v-if的指令,帮助我们完成判断的模板处理。

<div id="app">
  <h1 v-if="ok">Yes</h1>
  <h1 v-else>No</h1>  
</div>
<!-- 当ok为true的时候,输出: Yes, 否则输出: No -->

<script>
  var app = new Vue({         
    el: '#app',               
    data: {    
      ok: true      // true,返回:Yes,   false=> No               
    }
  });
</script>

v-if指令可以根据数据绑定的情况进行插入标签或者移除标签。 当然,如果熟悉js的都清楚,有if,肯定会有else。 Vue提供的是

v-else指令。

3.2. 列表渲染

3.2.1. 基本v-for循环渲染标签

模板引擎都会提供循环的支持。Vue也不例外,Vue是提供了一个v-for指令。基本的用法类似于foreach的用法。还是看例子最直接,上代码:

<div id="app">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
      </tr>
    </thead>
    <tbody> 
      <!-- 每次for循环,都会创建一个tr标签。item是遍历的元素。 -->
      <tr v-for="item in UserList" >
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.address }}</td>
      </tr>
    </tbody>
  </table>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {                   
     UserList: [
      {'name': 'malun', 'age': 18, 'address': '北京黑地下室'},
      {'name': 'flydragon', 'age': 22, 'address': '厦门的很多热的地方'},
      {'name': 'temp', 'age': 25, 'address': '东北松花江上'}
     ]
    }
  });
</script>

3.2.2. Template循环渲染多标签

上面的例子,我们演示的是 每次循环输出一个tr标签。如果我们希望每次循环生成两个tr标签呢?如果还有生成其他的标签呢?

Vue给我们提供了template标签,供我们用于v-for循环中进行处理。

上代码喽:

<ul>
  <!-- 通过template标签,可以一次循环,输出两个li标签 -->
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

3.2.3. 关于v-for对应的数组的更新

由于Vue的机制就是检测数据的变化,自动跟新HTML。数组的变化,Vue之检测部分函数,检测的函数执行时才会触发视图更新。这些方法如下:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

3.3. 表格显示的综合案例

下面是一个综合的案例,每秒钟往表格中添加一条数据。 本案例综合使用了v-if 和 v-for循环综合案例。

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之动态显示表格</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>地址</th>
        </tr>
      </thead>
      <!-- 如果列表有数据,直接输出表格数据,没有数据提示用户没有数据 -->
      <tbody v-if="UserList.length > 0"> 
        <tr v-for="item in UserList" >
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr><td colspan="3">没有数据奥!</td></tr>
      </tbody>
    </table>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
       UserList: []
      }
    });

    // 每秒钟插入一条数据。
    setInterval(function () {
      app.UserList.push({'name': 'malun', 'age': 18, 'address': '北京黑地下室'});
    }, 1000);
  </script>
</body>
</html>

3.4. 总结列表和条件绑定

列表的使用其实本质还是js的衍生使用,对于有js开发基础的没有什么难度。关键是多写几个案例就会详细通了。


联系老马

对应视频地址:https://chuanke.baidu.com/s5508922.html
老马qq: 515154084
老马微信:请扫码

微信:Flydragon_malun 或者18911865673
目录
相关文章
|
4天前
|
数据可视化 JavaScript 架构师
D3.js实战:数据可视化高级技巧实例应用
本文介绍了D3.js入门,包括创建HTML文件引入库、绘制简单线图、柱状图和饼图。示例展示了数据绑定、交互性和动画效果,如柱状图的悬停效果和线图的数据平滑过渡。此外,还提及力导向图和地图可视化的实现,以及使用Enter, Update, Exit模式进行动态更新。最后提到了复杂图表和高级技巧,如使用组件库、动画、交互性和性能优化。
19 0
|
5天前
|
存储 监控 JavaScript
Node.js 性能平台5分钟快速入门
首先,确保拥有阿里云账号并开通服务,以及一台可上网的服务器。然后,创建应用并记下App ID和App Secret。通过tnvm安装Node.js性能平台组件,包括alinode和agenthub,检查安装成功的方法是`which node`和`which agenthub`命令显示路径包含`.tnvm`。接着,启动agenthub,并在服务器上运行一个示例应用(demo.js),该应用模拟计算密集型任务。最后,通过阿里云控制台观察监控数据和执行诊断操作。注意,性能平台每分钟上传一次日志,可能需等待几分钟才能看到数据。详细部署指南可参考官方文档。
18 6
|
10天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
28 0
|
10天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
2天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
11 3
|
2天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
10 1
|
2天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1
|
3天前
|
JavaScript
vue知识点
vue知识点
15 2
|
3天前
|
JavaScript
Vue父子组件传值
<!-- 父组件向子组件传地值 -->
12 2
|
3天前
|
JavaScript Java
Vue : v-if, v-show
Vue : v-if, v-show
13 0
Vue : v-if, v-show