0
点赞
收藏
分享

微信扫一扫

用vue实现简单的v-if v-for的成绩表

Resin_Wu 2022-03-11 阅读 62

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>homework</title>
</head>

<body>
<div id="app">
    <table border="1">
        <tr  >
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
            <th>等级</th>
        </tr >
        <tr v-for="(item,index) in users">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.grade}}</td>
            <td v-if="item.grade < 60 ">不及格</td>
            <td v-if="60 < item.grade &&item.grade< 90 ">良好</td>
            <td v-if="90 < item.grade">优秀</td>
        </tr>
    </table>

</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            users: [{ id:'1',name: '张三', grade: '47',type:''},
                {  id:'2',name: '李四', grade: '89' ,type:''},
                { id:'3', name: '王五', grade: '65' ,type:''}]
        }
    })
</script>
</body>

</html>

 

 

举报

相关推荐

0 条评论