• vue考核点示例(仅供参考)

    vue考核示例

    一、环境

    考试压缩包提供：antd.min.css、antd.min.js、vue.min.js。

    二、编码需求：

    1、登录页面(20分)

    需要完成账号密码登录，并且需要有账号密码判断，只有账号输入【admin】密码输入【123456】的时候可以登录成功，否则显示【账号或密码错误】。

    2、数据操作页面(75分)

    需要完成table表的增删查操作

    1）、通过【table】与【a-input】标签完成添加信息的模块(15分，少一部分扣3分)

    2）、通过【a-input】与【computed】完成中间搜索框的模块样式与操作(15分，样式5，搜索10分)

    关键字【_this】【filter】【indexOf】

    3）、通过【table】与【v-for】完成表格的信息展示(15分)

    关键字【item,index】 

    4）、添加功能(20分，绑定函数5分、非空判断5分，非空提示3分，添加7分)

    5）、删除功能(10分，按钮样式3分，删除提示3分，功能4分)

    已删除

    3、变量与编码规范(5分)

    三、提交

    按照【班级_学号_姓名】的方式压缩【项目】，需要压缩内容包括：

    以及编码文件：

    完整编码示例

    直接导入即可使用：

    login.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <link rel="stylesheet" href="css/antd.min.css">
    9. </head>
    10. <body>
    11.     <div id="app">
    12.         <fieldset style="text-align: center;">
    13.             <legend>登录框</legend>
    14.             <table align="center">
    15.                 <tr>
    16.                     <td>账号：</td>
    17.                     <td>
    18.                         <a-input type="text" v-model="userName" placeholder="请输入账号"/>
    19.                     </td>
    20.                 </tr>
    21.                 <tr>
    22.                     <td>密码：</td>
    23.                     <td>
    24.                         <a-input type="password" v-model="passWord" placeholder="请输入密码"/>
    25.                     </td>
    26.                 </tr>
    27.                 <tr>
    28.                     <td colspan="2">
    29.                         <a-button type="primary" v-on:click="submit">登录</a-button>
    30.                     </td>
    31.                 </tr>
    32.             </table>
    33.         </fieldset>
    34.     </div>
    35.     <script src="js/vue.min.js"></script>
    36.     <script src="js/antd.min.js"></script>
    37.     <script>
    38.         new Vue({
    39.             el:"#app",
    40.             data:{
    41.                 userName:"",
    42.                 passWord:""
    43.             },
    44.             computerd:{
    45.  
    46.             },methods:{
    47.                 submit:function(){
    48.                     if(this.userName=="admin"&&this.passWord=="123456"){
    49.                         window.location.href="index.html";
    50.                     }else{
    51.                         this.$message.error("账号或密码错误");
    52.                     }
    53.                 }
    54.             }
    55.         });
    56.     </script>
    57. </body>
    58. </html>

    index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="css/antd.min.css">
    10. </head>
    11.  
    12. <body>
    13.     <!-- 视图层 -->
    14.     <div id="app">
    15.         <table align="center">
    16.             <tr>
    17.                 <td>编号: </td>
    18.                 <td><a-input type="text" placeholder="请输入编号" v-model="id" /></td>
    19.                 <td>姓名: </td>
    20.                 <td><a-input type="text" placeholder="请输入姓名" v-model="name" /></td>
    21.             </tr>
    22.             <tr>
    23.                 <td>价格:</td>
    24.                 <td><a-input type="text" placeholder="请输入薪水"  v-model="price" suffix="元"/></td>
    25.                 <td>性别:</td>
    26.                 <td>
    27.                     <a-radio-group v-model="sex">
    28.                         <a-radio :value="1">男</a-radio>
    29.                         <a-radio :value="0">女</a-radio>
    30.                     </a-radio-group>
    31.                 </td>
    32.             </tr>
    33.             <tr>
    34.                 <td colspan="4">
    35.                     <a-button block type="primary" v-on:click="addInfo">添加信息</a-button>
    36.                 </td>
    37.             </tr>
    38.         </table> 
    39.         <hr/>
    40.         <p><a-input type="text" placeholder="请输入搜索内容" v-model="SelectKey" /></p>
    41.         <hr/>
    42.         <table style="width: 100%;text-align: center;" border="1">
    43.             <tr>
    44.                 <th> 编号 </th>
    45.                 <th> 姓名 </th>
    46.                 <th> 薪水 </th>
    47.                 <th> 性别 </th>
    48.                 <th> 操作 </th>
    49.             </tr>
    50.             <tr v-for="(item,index) in newlist">
    51.                 <td>{{item.id}}</td>
    52.                 <td>{{item.name}}</td>
    53.                 <td>{{item.price}}</td>
    54.                 <td>{{item.sex==0?"女":"男"}}</td>
    55.                 <td><a-button type="primary" v-on:click="del(index)">删除</a-button></td>
    56.             </tr>
    57.         </table>
    58.     </div>
    59.     <script src="js/vue.min.js"></script>
    60.     <script src="js/antd.min.js"></script>
    61.     <script>
    62.         new Vue({
    63.             el: "#app",
    64.             data: {
    65.                 list: [{
    66.                     id: 1,
    67.                     name: "王语嫣",
    68.                     price: 12000,
    69.                     sex: 0
    70.                 }, {
    71.                     id: 2,
    72.                     name: "小龙女",
    73.                     price: 9000,
    74.                     sex: 0
    75.                 }, {
    76.                     id: 3,
    77.                     name: "紫霞",
    78.                     price: 8000,
    79.                     sex: 0
    80.                 }, {
    81.                     id: 4,
    82.                     name: "赵灵儿",
    83.                     price: 5000,
    84.                     sex: 0
    85.                 }, {
    86.                     id: 5,
    87.                     name: "杨过",
    88.                     price: 15000,
    89.                     sex: 1
    90.                 }],
    91.                 SelectKey: "",
    92.                 id: 0,
    93.                 name: "",
    94.                 price: 0,
    95.                 sex: 1
    96.             },
    97.             computed: {
    98.                 newlist: function() {
    99.                     var _this = this;
    100.                     return _this.list.filter(function(o) {
    101.                         return o.name.indexOf(_this.SelectKey) != -1;
    102.                     });
    103.                 }
    104.             },
    105.             methods: {
    106.                 addInfo: function() {
    107.                     if(this.id==0){
    108.                         this.$message.info('编号不正确');
    109.                         return;
    110.                     }
    111.                     if(this.name==0){
    112.                         this.$message.info('请输入姓名');
    113.                         return;
    114.                     }
    115.                     if(this.price==0){
    116.                         this.$message.info('请输入工资');
    117.                         return;
    118.                     }
    119.                     this.list.push({
    120.                         id: this.id,
    121.                         name: this.name,
    122.                         price: this.price,
    123.                         sex: this.sex
    124.                     });
    125.                 },
    126.                 del: function(o) {
    127.                     if (confirm('是否删除此行?')) {
    128.                         this.list.splice(o, 1);
    129.                     }
    130.                 }
    131.             }
    132.  
    133.         })
    134.     </script>
    135. </body>
    136.  
    137. </html>

  • 相关阅读:
    ERD Online 4.0.3_fix 元数据在线建模（免费、私有部署）
    Navicat导入SQL文件
    Spring Boot DTO 示例 - 实体到 DTO 的转换
    「SpringBoot」03 配置文件
    双向链表C语言版本
    CC4分析
    SHCTF-校外赛道
    Nginx__高级进阶篇
    SpringBoot整合Redis
    经典OJ题：环形节点是否存在！
  • 原文地址：https://blog.csdn.net/feng8403000/article/details/125451632