用VS Code写一个简单的学生列表（html vue）

最新推荐文章于 2023-11-25 14:45:09 发布

原创最新推荐文章于 2023-11-25 14:45:09 发布 · 3.1k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

使用VS Code创建一个简单的学生列表，通过HTML和Vue.js实现。涉及Vue的@click事件绑定、v-for列表渲染和v-on事件监听。包括定义表格结构、表头信息、表格内容，以及创建VM实例，定义添加和删除学生的methods。

用vs code写一个简单的学生列表（html vue）

1.定义表格结构

<div id="app">
        <button @click="add">添加学生</button>
        <button @click="del">删除学生</button>
      <table border="1" width="50%" style="border-collapse: collapse;">
            </table>
    </div>

注： @click事件绑定，绑定监听，不光可以绑定方法，也可以修改date里的数据。
2.定义表头信息，在table标签中写出具体的表格结构代码

        <tr>
            <th>班级</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
         </tr>

3.定义表格内容信息

         <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>

注：v-for列表渲染，v-for可以把数据中的一个数组对应为一组元素，v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。另外v-on，监听事件。
4.创建vm实例对象并定义students数组来储存学生信息

var vm = new Vue({
          el: '#app',
          data: {
            students:[]
          },
          methods:{

5.在mothods选项中定义处理函数add()添加学生信息

           //添加学生信息
         add(){
        var student = {
         grade: '1', 
         name: '张三', 
         gender: '男', 
         age: 25
            }
      this.students.push(student)
              },

注:mothods属性定义方法，其基本语法是

var vm = new Vue({
    methods:{
        //这里方法之间使用逗号分隔
        方法名:function(){}
});

6.在mothods选项中定义处理函数del()删除学生信息

              //删除学生信息
              del(){
                  this.students.pop()
              }

7.完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <title>student list</title>
</head>
<body>
    <div id="app">
        <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: '#app',
          data: {
            students:[]
          },
          methods:{
            //添加学生信息
         add(){
        var student = {
         grade: '1', 
         name: '张三', 
         gender: '男', 
         age: 25
            }
      this.students.push(student)
              },
              //删除学生信息
              del(){
                  this.students.pop()
              }
          }
        })
      </script>
      
</body>
</html>