• Javaweb之Vue指令案例的详细解析

    2.3.5 案例

    • 需求：

    • 如上图所示，我们提供好了数据模型，users是数组集合，提供了多个用户信息。然后我们需要将数据以表格的形式，展示到页面上，其中，性别需要转换成中文男女，等级需要将分数数值转换成对应的等级。

    • 分析：

      首先我们肯定需要遍历数组的，所以需要使用v-for标签；然后我们每一条数据对应一行，所以v-for需要添加在tr标签上；其次我们需要将编号，所以需要使用索引的遍历语法；然后我们要将数据展示到表格的单元格中，所以我们需要使用{{}}插值表达式；最后，我们需要转换内容，所以我们需要使用v-if指令，进行条件判断和内容的转换

    • 步骤：

      • 使用v-for的带索引方式添加到表格的标签上

      • 使用{{}}插值表达式展示内容到单元格

      • 使用索引+1来作为编号

      • 使用v-if来判断，改变性别和等级这2列的值

    • 代码实现：

      首先创建名为17. Vue-指令-案例.html的文件，提前准备如下代码：

      1. html>
      2. <html lang="en">
      3. <head>
      4.     <meta charset="UTF-8">
      5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7.     <title>Vue-指令-案例title>
      8.     <script src="js/vue.js">script>
      9. head>
      10. <body>
      11.     
      12.     <div id="app">
      13.         
      14.         <table border="1" cellspacing="0" width="60%">
      15.             <tr>
      16.                 <th>编号th>
      17.                 <th>姓名th>
      18.                 <th>年龄th>
      19.                 <th>性别th>
      20.                 <th>成绩th>
      21.                 <th>等级th>
      22.             tr>
      23.         table>
      24. ​
      25.     div>
      26. ​
      27. body>
      28. ​
      29. <script>
      30.     new Vue({
      31.         el: "#app",
      32.         data: {
      33.             users: [{
      34.                 name: "Tom",
      35.                 age: 20,
      36.                 gender: 1,
      37.                 score: 78
      38.             },{
      39.                 name: "Rose",
      40.                 age: 18,
      41.                 gender: 2,
      42.                 score: 86
      43.             },{
      44.                 name: "Jerry",
      45.                 age: 26,
      46.                 gender: 1,
      47.                 score: 90
      48.             },{
      49.                 name: "Tony",
      50.                 age: 30,
      51.                 gender: 1,
      52.                 score: 52
      53.             }]
      54.         },
      55.         methods: {
      56.             
      57.         },
      58.     })
      59. script>
      60. html>

      然后在上添加v-for进行遍历，以及通过插值表达式{{}}和v-if指令来填充内容和改变内容，其代码如下：

      1.  <tr align="center" v-for="(user,index) in users">
      2.      <td>{{index + 1}}td>
      3.      <td>{{user.name}}td>
      4.      <td>{{user.age}}td>
      5.      <td>
      6.          <span v-if="user.gender == 1">男span>
      7.          <span v-if="user.gender == 2">女span>
      8.      td>
      9.      <td>{{user.score}}td>
      10.      <td>
      11.          <span v-if="user.score >= 85">优秀span>
      12.          <span v-else-if="user.score >= 60">及格span>
      13.          <span style="color: red;" v-else>不及格span>
      14.      td>
      15. tr>

    其完整代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Vue-指令-案例title>
    8.     <script src="js/vue.js">script>
    9. head>
    10. <body>
    11.     
    12.     <div id="app">
    13.         
    14.         <table border="1" cellspacing="0" width="60%">
    15.             <tr>
    16.                 <th>编号th>
    17.                 <th>姓名th>
    18.                 <th>年龄th>
    19.                 <th>性别th>
    20.                 <th>成绩th>
    21.                 <th>等级th>
    22.             tr>
    23. ​
    24.             <tr align="center" v-for="(user,index) in users">
    25.                 <td>{{index + 1}}td>
    26.                 <td>{{user.name}}td>
    27.                 <td>{{user.age}}td>
    28.                 <td>
    29.                     <span v-if="user.gender == 1">男span>
    30.                     <span v-if="user.gender == 2">女span>
    31.                 td>
    32.                 <td>{{user.score}}td>
    33.                 <td>
    34.                     <span v-if="user.score >= 85">优秀span>
    35.                     <span v-else-if="user.score >= 60">及格span>
    36.                     <span style="color: red;" v-else>不及格span>
    37.                 td>
    38.             tr>
    39.         table>
    40. ​
    41.     div>
    42. ​
    43. body>
    44. ​
    45. <script>
    46.     new Vue({
    47.         el: "#app",
    48.         data: {
    49.             users: [{
    50.                 name: "Tom",
    51.                 age: 20,
    52.                 gender: 1,
    53.                 score: 78
    54.             },{
    55.                 name: "Rose",
    56.                 age: 18,
    57.                 gender: 2,
    58.                 score: 86
    59.             },{
    60.                 name: "Jerry",
    61.                 age: 26,
    62.                 gender: 1,
    63.                 score: 90
    64.             },{
    65.                 name: "Tony",
    66.                 age: 30,
    67.                 gender: 1,
    68.                 score: 52
    69.             }]
    70.         },
    71.         methods: {
    72.             
    73.         },
    74.     })
    75. script>
    76. html>

  • 相关阅读:
    AtCoder Beginner Contest 258 A~H 题解
    【论文解读】Parameter-Efficient Transfer Learning for NLP
    STM32FATFS文件系统移植
    JAVA设计模式3：抽象工厂模式，这是一种创建型设计模式
    java并发面试题
    Mybatis深入：整合框架
    java-php-python-ssm新冠疫苗接种预约系统登录计算机毕业设计
    sequence如何接收来自driver的transaction
    前端导入导出
    springboot蓝球场馆预约系统毕业设计-附源码211706
  • 原文地址：https://blog.csdn.net/qq_69748833/article/details/134485108