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

2.3.5 案例

  • 需求:


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

  • 分析:

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

  • 步骤:

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

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

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

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

  • 代码实现:

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

    html 复制代码
    <!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>
            </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>

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

    html 复制代码
     <tr align="center" v-for="(user,index) in users">
         <td>{{index + 1}}</td>
         <td>{{user.name}}</td>
         <td>{{user.age}}</td>
         <td>
             <span v-if="user.gender == 1">男</span>
             <span v-if="user.gender == 2">女</span>
         </td>
         <td>{{user.score}}</td>
         <td>
             <span v-if="user.score >= 85">优秀</span>
             <span v-else-if="user.score >= 60">及格</span>
             <span style="color: red;" v-else>不及格</span>
         </td>
    </tr>

其完整代码如下:

html 复制代码
<!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 align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </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>
相关推荐
DES 仿真实践家几秒前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python
Code Warrior1 小时前
【每日算法】专题五_位运算
开发语言·c++
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
沐知全栈开发3 小时前
HTML DOM 访问
开发语言
祝余呀3 小时前
html初学者第一天
前端·html
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
二进制person5 小时前
Java SE--方法的使用
java·开发语言·算法
速易达网络6 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
OneQ6666 小时前
C++讲解---创建日期类
开发语言·c++·算法
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app