Vue如何在考试中搞出高质量的成绩

一、前言

提示：注意给分项目，不给分的地方写不写都无所谓，分高的一定要拿下。

二、高质量代码的特征

提示：写好一定的注释，对应的对齐方式也要板板正正的。

三、编程实践技巧

提示：结构都是成对千万别挨个敲，都成对的敲，免得出现各类异常。

四、代码示例

提示：如敏捷开发、测试驱动开发、极限编程、结构化软件开发、持续集成和持续交付

项目层级：

login.html效果：

登陆失败弹出效果。

index.html效果：

模糊查询效果：

login.html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h1>登录/注册</h1><fieldset><legend>登录窗体</legend><p><input type="text" v-model="userName" placeholder="请输入用户名" /></p><p><input type="password" v-model="pwd" placeholder="请输入用户密码" /></p><p><input type="button" v-on:click="sub()" value="提交" /></p></fieldset></div><script src="js/vue.min.js"></script><script>new Vue({el: "#app",data: {isf: true,userName: "",pwd: ""},methods: {//登录函数sub: function() {if (this.userName == "admin" && this.pwd == "123456") {window.location.href = "index.html";} else {alert("登录失败");}}}});</script>
</body></html>

index.html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><style>* {margin: 0px;padding: 0px;}table,tr,th,td {border: 1px solid black;border-collapse: collapse;}table {width: 100%;text-align: center;}</style><div id="app"><input type="text" v-model="selectKey" placeholder="请输入查询关键字" /><hr/><table><tr style="background-color: skyblue;"><th>编号</th><th>姓名</th><th>简介</th></tr><tr v-for="item,index in newList"><td>{{item.id}}</td><td>{{item.userName}}</td><td>{{item.introduce}}</td></tr></table></fieldset></div><script src="js/vue.min.js"></script><script>new Vue({el: "#app",data: {list: [{id: 1,userName: "貂蝉",introduce: "红昌姑娘一位非常美丽的歌姬"}, {id: 2,userName: "褒姒",introduce: "可怜的姑娘，老头是周幽王"}, {id: 3,userName: "王昭君",introduce: "昭君家境贫寒,无力行贿,毛延寿便把她画得很丑"}, {id: 4,userName: "西施",introduce: "其实跟夫差没关系，范蠡才是正宫。"}],selectKey: ""},computed: { //计算属性，我们来用于模糊查询newList: function() {//为了不影响原list数据，故而创建影分身var _this = this;return _this.list.filter(function(o) {//使用indexOf判断字符串中是否有查询的关键字//如果indexO返回-1代表没有//返回非-1代表本字符串内有查询的字符，显示即可。return o.userName.indexOf(_this.selectKey) != -1;});}}});</script>
</body></html>

样例效果：

InsCode审核中，可以直接点击预览项目。

得分标准：

编号	内容	分数
1	项目层级标准创建js文件夹下放置vue.min.js，外部login.html文件以及index.html文件。	5分
2	login页面效果代码。	5分
3	login.html页面与index.html页面正确引入vue.min.js文件(5分)，正确声明Vue并绑定app容器(5分)。	10分
4	login.html页面input数据绑定Vue的data数据(5分)，并且在点击登陆的时候触发事件函数(5分)，如果userName=="admin"与pwd=="123456"时登陆成功(5分)，跳转到index.html页面(5分)。	20分
5	完成index页面的table代码格式(5分)，根据页面提示在Vue中声明data的list数组对象，包含id，userName，introduce(5分)，列表中遍历显示vue中的对象数据(10分)，完成页面列表显示样式效果(5分)。	25分
6	添加input标签用作模糊查询的输入元素模块，并在Vue中的data内绑定数据。	5分
7	添加computed属性(5分)，完成模糊查询操作。正确添加多层函数(5分)，完成过滤器函数(5分)，完成数据筛选(5分)。	20分
8	规范命名，有一定的缩进格式，代码整洁，有一定注释，可读性强。	10分

五、总结

提示：根据给分享注意操作，对应的分数肯定少不了。

Vue如何在考试中搞出高质量的成绩相关推荐

MPB：中科院生态环境中心邓晔组-从环境样本中提取高质量DNA-研磨加DNeasy试剂盒方法...
为进一步提高<微生物组实验手册>稿件质量,本项目新增大众评审环节.文章在通过同行评审后,采用公众号推送方式分享全文,任何人均可在线提交修改意见.公众号格式显示略有问题,建议电脑端点击文末阅 ...
在Unity中制作高质量的光照效果（上）
原创: Unity Unity官方平台本篇专家指南将介绍在Unity中制作高质量光照效果的多种高级方法,其中使用了2D和立方体贴图的光线遮罩,并且利用了Unity高清渲染管线HDRP中的高级着色器. ...
[转]敏捷开发中编写高质量Java代码
本文转自:http://dev.yesky.com/103/11164603.shtml 敏捷开发的理念已经流行了很长的时间,在敏捷开发中的开发迭代阶段中,我们可以通过五个步骤,来有效的提高整个项目的 ...
敏捷开发中编写高质量Java代码
原文出处:http://java.csdn.net/a/20100308/259219.html 敏捷开发的理念已经流行了很长的时间,在敏捷开发中的开发迭代阶段中,我们可以通过五个步骤,来有效的提高整 ...
亲密关系沟通-【唤起亲密】-在平淡关系中创造高质量沟通
我们相处时间越长,好像没话聊 ta和别人的话题很多,和我的话题很少为什么关系会陷入平淡? 1.不是ta变了,而是ta一直就这样结婚28年,一天讲话不超过3句,跟他说话,爱答不理,家里的话,我问他也 ...
计算机语言的比较英文论文,科学网—撰写高质量英文科技论文的心态、布局、程序和方法 - 岳中琦的博文...
撰写高质量英文科技论文的心态.布局.程序和方法岳中琦高质量科技论文,是将我们自己的创新研究成果,在现在或将来被全世界人知道和应用.成为人类已知的知识和实践.因此,我们在撰写科技论文时要具备一种极其 ...
高质量 C++/C 编程指南
高质量 C++/C 编程指南文件标识: 文件状态 [ ] 草稿文件 [√]正式文件 [ ] 更改正式文件当前版本: 1.0 作者: 林锐博士完成日期: 2001 年7 月24 日高质量 C ...
html5试卷分数提交制作,如何制作一份高质量的试卷
一.衡量试卷质量的指标衡量试卷的优劣,通常我们用试卷的信度.效度.难度和区分度等指标来衡量数学试卷的质量.因此,要编制一份高质量的数学试卷,我们必须先了解这些指标的含义,并掌握它们之间的关系. 1． ...
苏黎世大学 AI 新研究：仅用少量样本生成高质量光声图像
近日,苏黎世联邦理工学院和苏黎世大学的科学家宣布,可以利用机器学习方法来改善光声成像,成果发表在Nature Machine Intelligence上(点击查看论文链接) "光声成像&qu ...

Vue如何在考试中搞出高质量的成绩

一、前言

二、高质量代码的特征

三、编程实践技巧

四、代码示例

项目层级：

login.html效果：

index.html效果：

模糊查询效果：

login.html代码

index.html代码

样例效果：

得分标准：

五、总结

Vue如何在考试中搞出高质量的成绩相关推荐

最新文章

热门文章

Vue如何在考试中搞出高质量的成绩

一、 前言

二、高质量代码的特征

三、编程实践技巧

四、 代码示例

项目层级：

login.html效果：

index.html效果：

模糊查询效果：

login.html代码

index.html代码

样例效果：

得分标准：

五、 总结

Vue如何在考试中搞出高质量的成绩相关推荐

最新文章

热门文章

一、前言

四、代码示例

五、总结