vue实现自定义多选与单选的答题功能

2020-06-13 10:48:13易采站长站整理

大致几个属性

v-for是为了遍历题中的每一个选项,
click绑定了点击当前li时的事件,v-bind同步click绑定了动态的类名,用于展示选中状态。
这里值得注意的一个点也是当时抓虾的一个点是,v-on:click和v-bind:class结合,
click的时候,每次把当前点击的li的index值传出去,

然后定义一个变量chooseNum,点击函数中,将参数index赋给他

this.chooseNum = index;

靠这种间接拿到点击索引值得曲线救国方式,在v-bind的监视下,每次点击获得的索引chooseNum

和这几个li中自己的index对上眼以后,就如正确的钥匙对上了合适的锁,类名绑定就成了。

也就是那十几条难题中的第一个被轻松干掉的难题的前半部分: 单选点击后选中状态 。

 

费这么半天劲,才解决一个点啊!我不服!别急,接下来还有好戏。

但其实这个思路还是挺重要的,靠这一点“死皮赖脸”拉关系的劲头,这个法子以后还倒是可以有很多用武之地。

好戏在下一个属性,没错就是ref,这也是我步入万丈深渊一去不复返的梯子啊!

ref

要知道人家可以vue里边的特殊特性,

要知道人家可是很有能力的,

要知道我老是连着打不出妖之道这三个字!我就不行了啊!

好了不皮了。

官网记载ref这个特殊特性,被用来给元素或子组件注册引用信息。 引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例。

我的理解大白话来说,他就是给dom元素或者组件实例一个身份证号,身份证号有的特性他也就有,那就是唯一不重复。

如果配合上v-for,就能获取这一批带有ref特性所组成的数组。

通过数组下标索引出来的个体,也就是对应的dom元素本身或者组件实例本人无疑了。

就好像拿着身份证号去公安局查人一样,快速不说,还很高效有没有,一查一个准!

但需要说明的是,在created钩子中,这个特性拿不到东西,生命周期钩子里只有在mounted里(可能还有后边的钩子里,我没用过不准确)可以用,毕竟你想啊,身份证号虽说一出生就有了,但是只有挂载到网上你才能查到大的嘛!

所以,我究竟用它做了什么呢?那就是多选功能啊!

还是先回到上边说的,绑定了一个事件,并且会传递一个当前点击li的索引号,并且前边也提到过,