成语学习

合集 - 蓝桥杯(21)

1.逃离二向箔2023-06-022.偷梁换柱2023-06-023.课程列表2023-06-024.粒粒皆辛苦2023-06-02

5.成语学习2023-06-02

6.消失的 Token2023-06-027.芝麻开门2023-06-028.资讯接口2023-06-029.防抖函数2023-06-0310.element-ui 组件二次封装2023-06-0411.心愿便利贴2023-06-0412.购物车2023-06-0413.绝美宋词2023-06-0414.布局切换2023-06-0515.和手机相处的时光2023-06-0516.天气趋势2023-06-0517.阅读吧2023-06-0518.宝贵的一票2023-06-0819.大电影2023-06-0820.封装 Promisefy 函数2023-06-0821.权限管理2023-06-08

收起

习题链接

成语学习

任务

玩一个小游戏，根据提示语句，按照顺序选中正确的字形成成语
举例：
    提示：形容极其稀少
    我们就要按照顺序点击"绝"、"无"、"仅"、"有"这几个字
    最后点击确定进行判定是否正确

关键点

1. this.$set()
   1. 在vue对于一个已经确认了长度的数组，在进行修改其下标对应的值的时候Vue是无法追踪这个变化
   2. 使用set在修改数组或对象指向的元素的时候，会触发Vue的响应式更新
   3. 语法this.$set(数组名,下标,其值);
   4. 全局方法Vue.set()和this.$set()效果一样
   5. 此处是扩展vue2使用的Object.defineProperty，vue3使用的proxy，拦截对象的访问，从而实现响应式
2. filter
   1. filter是数组的一个方法，用来过滤数据的
   2. 语法就是 arr.filter((item,index)=>{需要返回的数据就返回true,不需要就返回false}) 这个方法不会修改原数组
   3. 此题我们根据tip,来获取到正确的成语是什么
3. join转字符串
   1. join是数组的一个方法，将数组转为字符串
   2. 用法数组.join('连接字符串') 一般就放一个''，就是不适用任何规则去拼接
   3. 当我们点击了确定之后，我们需要将刚刚点击的单个汉字拼接起来与正确的成语进行比较

代码实现 && 完整的代码

1. 完成第一件事情，按照题目要求完成getSingleWord函数

   //TODO 点击文字后，在idiom从左到右第一个空的位置加上改文字
   getSingleWord(val) {
     const index = this.idiom.indexOf(""); // 找到空字符的地方
     if(index != -1) this.$set(this.idiom,index,val); // 使用this.$set()
     //若直接使用this.idiom[index] = val;数据是变化了，但页面没有变化
   },
   

2. 完成第二件事情，当我们点击了四个汉字之后就要进行判断操作了

   confirm() {
     const aimWord = this.arr.filter(item=>{if(item.tip == this.tip) return true})[0].word;
     const word = this.idiom.join('') // 数组转字符串
     if(aimWord == word) this.result = true;
     else this.result =false;
   }
   

__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17452472.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！