VUE 爬坑之旅-- v-for,v-on:click 使用需要注意的地方

今天在写一个页面的时候,需要在一个 v-for 循环里面给每个 item 绑定一个点击事件,在这个事件中我需要拿到所点击 item 里面的数据和它的 index。写法如下:

<div @click="chooseAddress(item,index)" v-for="(item,index) in addresses">
</div>

这基本上就是标准写法,@click 里面的是我们的点击事件,这个点击事件需要声明在 vue 对象的 methods 节点下,在里面处理相关的逻辑。

下面才是本文的重点,记录下来,避免以后再犯这样的低级错误(说起来都是泪,自己把自己坑了一下午,,,)。

这里写图片描述

上图用红框圈起来的地方是要特别注意的,首先是 methods ,这个节点里面都是你声明的相关方法,注意的是写的时候不要漏掉了 s,是 methods,就这么一个小细节,坑了我几个小时,一直是以为定义的方法没有执行,各种搜为什么方法没有执行什么的,一直搜不到,,,,最后才发现是漏掉了一个 s ,当时真是想撞墙。
第二个注意点就是方法里面的 this ,这里的 this 是指向的是 vue 的 data 节点,也就是 vue.$data 这个对象。可以用它来直接操作你需要操作的数据。要注意的是用的时候千万不要漏写了,我当时就是在 for 循环里面漏写了 this,效果就一直出不来,我还各种去找原因,,,,

最后,vue 是一个数据驱动的框架,能通过操作数据来达到效果的地方就不要去操作 DOM了。所以我在声明的方法里面都是对数据进行操作,数据改变后,vue 会帮你去做页面渲染。

以上,就是这次的踩坑记。

猜你喜欢

转载自blog.csdn.net/zgh0711/article/details/78367734