VUE:学生列表案例——内部指令v-for与v-on简单应用

#本案例需要熟悉v-for与v-on这两个vue内部指令，下面通过两个简单的案例，带领大家迅速熟悉一下这两个常用的内部指令v-for指令：主要用于列表的渲染与循环数组简单案例：关键代码部分：<div id="app"><div v-for="(item,index) in list" data-id=“index">索引是：{{index}}，元素内容是：{{item}}&

JieFighting

4670人浏览 · 2020-12-01 20:12:39

JieFighting · 2020-12-01 20:12:39 发布

#本案例需要熟悉v-for与v-on这两个vue内部指令，下面通过两个简单的案例，带领大家迅速熟悉一下这两个常用的内部指令

v-for指令：主要用于列表的渲染与循环数组

简单案例：

v-for应用的简单案例

关键代码部分：

<div id="app">
  <div v-for="(item,index) in list" data-id=“index">
    索引是：{{index}}，元素内容是：{{item}}
  </div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      list: [1, 2, 3]
    }
  })
</script>

v-on指令：事件监听指令配合事件类型一块使用，最常见事件类型click（单击事件）

简单案例

<button v-on:click=函数名">单击</button>

学生列表案例

案例

在这里插入图片描述

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="add">添加</button>
        <button v-on:click="del">删除</button>
      <table>
        <tr>
            <th>班级</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
         </tr>
          <tr 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: 'zhangsan', 
         gender: '男', 
         age: 20
            }
      this.students.push(student)
              },
              del(){
                  this.students.pop()
              }
          }
        })
      </script>
      
</body>
</html>

建议初学者先直接先跑一下代码，出结果之后再认真深究其中的代码

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^