Web前端小测试——Vue简易投票(根据票数实时更新排名)

前言：新人投稿，不足之处，还望斧正！

这段时间有个Web前端实验上机测试，当时没有在限定的时间内做出来的，真的感觉自己好笨好笨，所有积累的理论基础感觉自己没有任何一丢丢可以拿上台面来，过后也因此不敢去问做身边的同学，只好自己一步一步地去反省去总结，直到把它实现为之！

实现效果

App.vue 代码如下

<template><div id="app"><div class="test" v-for="(item,index) in datas" :key="index"><imgsrc="./assets/logo.png"title="头像"style="height: 60px; width: 60px"/><span style="font-size: 20px;">{{ item.name }}&nbsp;{{ item.num }}&nbsp;票</span><input type="button" value="投票" @click="add(index)"/></div><div class="ans"><h3>排名第一是:&nbsp;{{ans}}</h3></div></div>
</template><script>
export default {name: "App",data() {return {datas: [{id: 1,name: "小明",num: 0,},{id: 2,name: "小王",num: 0,},{id: 3,name: "小张",num: 0,},],ans: 'none'};},methods: {add(index) {this.datas[index].num++;// console.log(this.datas[index].num);},sort() {var max=this.datas[0].num , i=0;for (const key in this.datas) {if(max < this.datas[key].num){max=this.datas[key].num;i = key;}}return i;}},// 钩子函数（Dom发生更新时就执行）updated() {var max = this.sort();this.ans=this.datas[max].name;}
};
</script><style>
#app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

总结：在头一次编写的时候没有用v-for循环遍历，而是直接上div写两三个候选人出来，然后使用{{}}和v-bind绑定属性，再将“投票”按钮的绑定事件@click=“”放在methods属性中，并将找最大票数的方法sort()写在其中，而最后我却用钩子函数created()调用sort()【created是在new Vue实例创建完成后执行的，其可以访问到实例创建完成后的data(),methods,cumputed等等属性或者方法，而此时是还没有挂载DOM的，一般用于进一步初始化页面，实现函数的自执行】

交卷回来就在想，是不是因为属性是单向绑定的，只能从data中流出，而不能待我点击“投票”按钮时将+1流回data，显然这是错误的分析，因为我的计算方法是直接将data中的值进行自加1的，那么会不会是因为methods的计算方法没能缓存尝试去考虑一下Vue的计算属性cumputed，结果在computed属性中，要传参就得用函数的闭包，而这样子上一步的结果可能就得不到缓存，那和methods属性没多大的区别。再看监听属性watch，可是要实现监听某人的票数发生了变化我就得知道某人更新前后的票数，才能给予它一定的执行事件。也就是这样自我绕死在一棵树上边了！

最后，在百般无奈之下，再去刷了一下Vue的官方文档，看到Vue钩子函数生命周期图表时，才意识到是不是钩子函数一开始就选错了，因为我调用得早了，才导致没有实现实时的排名。

Web前端小测试——Vue简易投票(根据票数实时更新排名)相关推荐

Web前端设计基础测试
Web前端设计基础测试一. 多选题(共6 题,30.0分) 二. 单选题(共4 题,20.0分) 三. 判断题(共10 题,50.0分) 一. 多选题(共6 题,30.0分) (多选题,5.0分)关 ...
好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
vue如何获取年月日_好程序员web前端教程分享Vue相关面试题
好程序员web前端教程分享Vue相关面试题,Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来好程序 ...
解决Vue循环中子组件不实时更新的问题
解决Vue循环中子组件不实时更新的问题参考文章: (1)解决Vue循环中子组件不实时更新的问题 (2)https://www.cnblogs.com/rever/p/10565042.html 备忘 ...
2021年最新Web前端HTML,CSS,Vue,React,Jquery大概率面试题合集
CSS3 HTML5 前端面视题 1.Css3新增的特性边框: border-radios 添加圆角边框 border-shadow:给框添加阴影 (水平位移,垂直位移,模糊半径,阴影尺寸,阴影颜色 ...
web前端 react与vue 流行框架的比较
JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架.但哪一款最适合你? JavaScript越来越受欢迎,许多科技巨头正在从中获益.每天都会出现大量的框架和语言,我 ...
web前端小项目个人实例_Web前端：小程序界面与逻辑项目实训
大家好,我来了!本期为大家带来的Web前端学习知识是"Web前端:小程序界面与逻辑项目实训",喜欢Web前端的小伙伴,一起看看吧! 主要内容数据绑定渲染界面层数据渲染事件处 ...
【经验分享】Web前端开发测试常见问题总结
[辰兮要努力]:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端.后台.数据 ...
Web前端笔记-解决Vue编写的输入框（input、textarea等）使用JS设置value时提交表单无效的问题
主要的原因是vue相当于套了一层,界面上的输入框会关联model,提交表单的时候,他是直接提交model的值,而不是传统的输入框里面的值. 所以用这种: let textAreaItem = docu ...

Web前端小测试——Vue简易投票(根据票数实时更新排名)

Web前端小测试——Vue简易投票(根据票数实时更新排名)相关推荐

最新文章

热门文章