Vue-Day 02 案例分享

Vue-Day 02 小案例练习

一.点击切换类小案例

<template>
  <div>
    <!-- 请实现，点击h1标签，字体变大变红，再点击恢复原状 -->
    <h1 :class="{ big: isBig }" @click="isBig = !isBig">hello world</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isBig: false,
    };
  },
};
</script>
<style>
.big {
  color: red;
  font-size: 100px;
}
</style>

二.成绩增删案例

<!--
1.循环列表  v-for 显示到页面上
2.引入 moment 模块 format 修改时间
3.新增效果  给表单增加一个提交事件  提交数据 列表显示一条数据 push  v-model 数据双向绑定
检查学科是否为空  新增完毕 重置清空表单
4.删除效果 index splice(index,1)
存在的问题 当显示全删除之后id不存在 会出现报错 需要对id进行判断 
-->
<template>
  <div class="container-fluid p-3">
    <div class="row">
      <div class="col-8">
        <table class="table table-bordered text-center">
          <!-- 表格标题部分 -->
          <thead class="table-light">
            <tr>
              <th scope="col">编号</th>
              <th scope="col">科目</th>
              <th scope="col">成绩</th>
              <th scope="col">考试时间</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <!-- 表格内容 -->
          <tbody>
             <!-- 循环列表 -->
             <tr  v-for="(item,index) in subjectList" :key="item.id">
              <th scope="row">{{item.id}}</th>
              <td>{{item.name}}</td>
              <td :class="{warning:item.score<60}">{{item.score}}</td>
              <td>{{format(item.date)}}</td>
              <td>
                <button type="button" class="btn btn-link" @click="delSubject(index)">删除</button>
              </td>
            </tr>
            <!-- <tr>
              <th scope="row">1</th>
              <td>数学</td>
              <td>100</td>
              <td>2022-06-01 00:00:00</td>
              <td>
                <button type="button" class="btn btn-link">删除</button>
              </td>
            </tr> -->
            <!-- 总分，平均分 -->
            <tr>
              <td colspan="5">
                <span>总分：0</span>
                <span class="ms-5">平均分：0</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 新增学科 -->
      <div class="col-4">
        <!-- 在表单里 可以给表单绑定提交submit事件啊 -->
        <form class="container-fluid" @submit.prevent="addSubject" autocomplete="off" >
          <div class="row mb-3">
            <label for="inputSubject" class="col-sm-3 col-form-label">科目</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="inputSubject" placeholder="请输入科目" v-model="subject" />
            </div>
          </div>
          <div class="row mb-3">
            <label for="inputScore" class="col-sm-3 col-form-label">分数</label>
            <div class="col-sm-9">
              <input type="number" class="form-control" id="inputScore" placeholder="请输入分数" v-model="score"/>
            </div>
          </div>
          <div class="row">
            <div class="col-9 offset-3">
              <!-- 给添加按钮绑定点击事件 但是在表单里 可以给表单绑定提交submit事件啊 -->
              <button type="submit" class="btn btn-primary">添加</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
// 引入 moment 模块
import moment from 'moment';
export default {
  data(){
    return{
      subjectList: [
        {
          id: 1,
          name: '语文',
          score: 56,
          date: new Date(),
        },
        {
          id: 2,
          name: '数学',
          score: 100,
          date: new Date(),
        },
      ],
      subject:'',
      score:'',
    }
  },
  methods:{
    format(date){
      return moment(date).format('YYYY-MM-DD HH:mm');
    },
    addSubject(){
      if(this.subject === ''){
        alert('科目不能为空');
        return;
      }
      const item = this.subjectList[this.subjectList.length -1]
      this.subjectList.push({
        id: item === undefined ? 1 : item.id + 1,
        // id:item.id+1,
        name: this.subject,
        score: this.score,
        date: new Date(),
      });
      this.subject = '';
      this.score = '';
    },
    delSubject(index){
      this.subjectList.splice(index,1);
    }
  }
};
</script>
<style>
.warning{
  color: red;
}
</style>

三.计算机属性的完整写法小案例

1.岁数的计算

<template>
<div>
  <span>年龄{{age}}</span>
  <button @click="age = age + 1">+1 岁</button>
  <h3>出生年份:{{year}}</h3>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return{
      year:2000,
    };
  },
  computed:{
    age:{
      get(){  
      const date = new Date();
      return date.getFullYear() - this.year;
      },
      set(newAge){
        console.log(newAge);
        const date = new Date();
        this.year =date.getFullYear()  - newAge;
      }
    }
  }
}
</script>
<style>
</style>

2.全选案例

<template>
  <div>
    全选：<input type="checkbox" v-model="allChecked"><button class="btn btn-primary btn-sm ms-2" @click="btn">反选</button>
    <ul>
            <!-- 渲染列表 -->
        <li v-for="item in list" :key="item.name">
          <input type="checkbox" v-model="item.checked">{{item.name}}
          </li>
    </ul>
  </div>
</template> 
<script>
export default {
   data(){
    return{
      list:[
        {
          name: "猪八戒",
          checked: false,
        },
        {
          name: "孙悟空",
          checked: false,
        },
        {
          name: "唐僧",
          checked: false,
        },
        {
          name: "白龙马",
          checked: false,
        },
      ]
    }
   },
   computed:{
    allChecked:{
      get(){
        // 默认全选
        let all = true;
         // 遍历列表，如果有一项没有选中，就把全选设置为false
        this.list.forEach((i)=>{
          if(i.checked === false){
            all = false
          }
        });
        return all;
      },
      // 更新 点击全选 
      set(all){
        this.list.forEach((i)=>{
          i.checked = all;
        });
      }
    }
   },
   methods:{
       //反选 取反
    btn(){
      this.list.forEach((i)=>{
        i.checked = !i.checked;
      });
    }
   }
}
</script>
<style>
</style>