VUE3 模板字符串中加入点击事件和DIV的显示隐藏

572 阅读1分钟

记录一下在VUE3里操作模板字符串的心得。 加入点击事件: 在VUE3里面写模板字符串时,想要给元素绑定点击事件,就得写原生JS的click方法了,这样:onClick="click()",记住方法名称后面的括号不能省哦。如图:

image.png 接下来,因为原生JS绑定的click是要绑定到window对象上的,而VUE3里面的window对象是没有你自定义的点击方法名称的,你要给window对象加入你自定义的方法名称。这时你要这样操作: 1.新建一个xx.d.ts的文件,如图:

image.png

2.在global.d.ts里面给global扩展你想要的方法名称,如图:

image.png

(我这里是加了2个自定义的方法进去)

3.给global.d.ts加完后,你要到tsconfig.json里面,找到include属性,把你刚刚新建的global.d.ts文件导进去,如图:

image.png这一步非常关键哦 到此,扩展完全局的方法后,在VUE3里你就要去onMouted()把你自定义的方法加到window对象上,如图:

image.png

好了,这时候你就可以写你自定义的方法了,如图:

image.png

DIV的显示隐藏: 当模板字符串渲染到页面上后,你想要通过点击事件来控制某元素的显示隐藏也很简单,既然前面点击事件已经能响应了,只要把'this'传入到方法里面(这个this是指你绑定点击事件的元素哦,不是VUE2的this哦,更不是VUE3的this),如图:

image.png

image.png

直接给自己来个行间就好,不用客气。