成绩案例

1.3 成绩案例

功能描述：

1. 渲染功能
2. 删除功能
3. 添加功能
4. 统计总分，求平均分

思路分析：

1. 渲染功能 v-for :key v-bind:动态绑定class的样式
2. 删除功能 v-on绑定事件， 阻止a标签的默认行为
3. v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据
4. 使用计算属性computed 计算总分和平均分的值

1. 渲染功能

 data: {
        list: [
          { id: 1, subject: '语文', score: 20 },
          { id: 7, subject: '数学', score: 99 },
          { id: 12, subject: '英语', score: 70 },
        ]
      },
   <tbody>
          <tr v-for="(item,index) in list" :key="item.id">
            <td>{{ index + 1 }}</td>
            <td>{{ item.subject }}</td>
            <td :class="{red: item.score < 60}">{{ item.score }}</td>
            <td><a href="#" @click="del(item.id)">删除</a></td>
          </tr>
        </tbody>
        <tbody v-if="list.length === 0">
          <tr>
            <td colspan="5">
              <span class="none">暂无数据</span>
            </td>
          </tr>
        </tbody>

2. 添加和删除功能

<div class="form">
      <div class="form-item">
        <div class="label">科目：</div>
        <div class="input">
          <input type="text" placeholder="请输入科目" v-model="subject" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">分数：</div>
        <div class="input">
          <input type="text" placeholder="请输入分数" v-model.number="score" />
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="submit" @click="add">添加</button>
        </div>
      </div>
    </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, subject: '语文', score: 20 },
          { id: 7, subject: '数学', score: 99 },
          { id: 12, subject: '英语', score: 70 },
        ],
        subject: '', // 和科目输入框双向绑定
        score: '' // 和分数输入框双向绑定
      },
      methods: {
        add() {
          this.list.push({
            id: Date.now(),
            subject: this.subject,
            score: this.score
          })
          this.subject = this.score = ''
        },
        del(id) {
          this.list = this.list.filter(item => item.id !== id)
        }
      },
    })
  </script>

3. 统计总分，求平均分

 <td colspan="5">
     <span>总分:{{ total }}</span>
     <span style="margin-left: 50px">平均分:{{avg}}</span>
 </td>
computed: {
        total() {
          return this.list.reduce((x, y) => x + y.score, 0)
        },
        avg() {
          return (this.total / this.list.length).toFixed(2)
          // console.log(typeof this.list.length)
          // console.log(typeof Number(val))
        }
      }
    }