Vue内置指令-学生信息案例

不会变大小写

于 2024-10-24 16:56:06 发布

阅读量288

点赞数 5

文章标签： 1024程序员节 vue

本文链接：https://blog.youkuaiyun.com/g40585/article/details/143213646

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加学生</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id = "app1" >
        <button @click = "add">添加学生</button>
        <button @click = "del">删除学生</button>
        <table border="1" width="50%" style="border-collapse: collapse">
            <tr>
                <th>班级</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr align="center" v-for = "item in students">
                <td>{{item.grade}}</td>
                <td>{{item.name}}</td>
                <td>{{item.gender}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>

<script>
    var vm = new Vue({
        el:'#app1',
        data:{
            students: []
        },
        methods:{
            //添加学生信息
            add(){
                var student = {grade: '1' ,name: '张三' ,gender: '男' ,age: '25' }
                this.students.push(student)
            },
            del(){
                this.students.pop()
            }
        }
    })
</script>
</body>
</html>