v-for,v-if,v-else-if,v-else的基本使用

Colinnian

已于 2024-04-06 22:06:39 修改

阅读量115

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-04-06 22:04:45 首次发布

本文链接：https://blog.csdn.net/Colinnian/article/details/137439705

版权

<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 v-else style="color:red;">不及格</span>
                </td>
            </tr>
        </table>    
    </div>

</body>
<script>
    new Vue({
        el:"#app",//接管区域
        data:{
            users:[{
                name:"Tom",
                age:20,
                gender:1,
                score:78
            },{
                name:"rose",
                age:10,
                gender:2,
                score:86
            },{
                name:"jerry",
                age:26,
                gender:1,
                score:90
            },{
                name:"Tony",
                age:30,
                gender:1,
                score:52
            }]
        },
        methods:{
            
        }
    })
</script>