使用vue指令将数据渲染到表格中

最新推荐文章于 2024-04-18 21:27:13 发布

今天的接口写完了吗？

最新推荐文章于 2024-04-18 21:27:13 发布

阅读量606

点赞数 12

分类专栏： vue2 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_65142821/article/details/135587903

版权

vue2 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js中进行需求分析，使用v-for指令遍历数组并将数据展示为表格，包括性别和成绩等级的动态转换。展示了完整的HTML和JavaScript代码以及运行结果。

摘要由CSDN通过智能技术生成

一、需求分析

二、完整代码

三、运行结果

一、需求分析

需求：

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

首先我们肯定需要遍历数组的，所以需要使用v-for标签；然后我们每一条数据对应一行，所以v-for需要添加在tr标签上；其次我们需要将编号，所以需要使用索引的遍历语法；然后我们要将数据展示到表格的单元格中，所以我们需要使用{{}}插值表达式；最后，我们需要转换内容，所以我们需要使用v-if指令，进行条件判断和内容的转换
步骤：
- 使用v-for的带索引方式添加到表格的<tr>标签上
- 使用{{}}插值表达式展示内容到单元格
- 使用索引+1来作为编号
- 使用v-if来判断，改变性别和等级这2列的值

二、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <!-- 给第二行数据进行遍历 -->
            <tr v-for="(user, index) in users">
                <th >{{index+1}}</th>
                <th >{{user.name}}</th>
                <th>{{user.age}}</th>
                 <th>
                    <span v-show="user.gender==1">男</span>
                    <span v-show="user.gender==2">女</span>
                 </th>
                 <th>{{user.score}}</th>
                 <th>
                    <span v-show="user.score>=85">优秀</span>
                      <span v-show="user.score>=70">良好</span>
                      <span v-show="user.score>=60">一般</span>
                      <span v-show="user.score<60">不及格</span>
                 </th>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

三、运行结果

今天的接口写完了吗？

关注

12
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用vue指令将数据渲染到表格中

首先我们肯定需要遍历数组的，所以需要使用v-for标签；然后我们每一条数据对应一行，所以v-for需要添加在tr标签上；其次我们需要将编号，所以需要使用索引的遍历语法；然后我们要将数据展示到表格的单元格中，所以我们需要使用{{}}插值表达式；最后，我们需要转换内容，所以我们需要使用v-if指令，进行条件判断和内容的转换。如上图所示，我们提供好了数据模型，users是数组集合，提供了多个用户信息。然后我们需要将数据以表格的形式，展示到页面上，其中，性别需要转换成中文男女，等级需要将分数数值转换成对应的等级。
复制链接

扫一扫