vue3 Event 事件处理

我们可以使用指令v-on 或简写方式@来监听js事件触发。

仅用方法名称可以返回event

方法传参数

如果想传参同时需要处理event ，我们可以用$event

绑定多个方法

eventpreventDefault()

eventstopPropagation()

passive 相当于addEventListener

exact 修饰符允许你控制由精确的系统修饰符组合触发的事件

鼠标修饰符

第步创建静态页面vonhtml并引入vuejs关键核js文件

第二步主题元素插入div标签元素并其插入input输入框按钮利用v-on指令绑定点击事件queryDate

第三步div标签编写vuejs点击事件事件获取前期

第四步让输入框按钮间距设置body元素

第五步预览该静态页面点击按钮发现输入框没值调试发现错误缺少jquery核js文件!

  在上一章节中，我们了解了Vue中的常用指令，同样，在本章节中继续讲解Vue中常用的指令，并且这些指令是针对语句使用的

  用于条件性的渲染一块内容，只有当条件的返回值为真时，才会渲染该块的内容,一般默认值是true

当设置ok为false时，div没有被渲染到浏览器中。

   要注意的是，为变量赋值Boolean类型时，不能加引号，加了引号就是字符串类型，字符串类型永远都为真

  如果v-if的条件不满足，将跳转到v-else-if，而当所有的v-else-if条件都不满足时，将会跳转到v-else。v-else-if、v-esle相当于v-if的一个分支

  当为type赋值A或者B时，就会将A或者B的div渲染到浏览器中，当条件都不满足时，就会渲染最后一个div到浏览器中。

   要注意的是，v-else 元素要跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

  v-show指令也是用于根据条件显示元素的指令，不同的是 v-show不支持v-else和<template> 元素 ，并且带有 v-show 的元素 始终会被渲染并保留在 DOM 中 ，只是简单地切换元素的 CSS 属性 display。

  当one赋值为真时，div就会显示在浏览器中，当one赋值为false时，div就会隐藏在浏览器中。

41 渲染元素

  ① v-if ：是 “真正 ”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

  ② v-show：不管初始条件是什么，元素总是会被渲染，并且只是 简单地基于 CSS 进行切换 。

42 渲染条件

  ① v-if ：当条件结果为 假 时， 不对元素进行渲染 ，直到条件为 真 才将元素 渲染

  ② v-show： 不管初始条件是什么 ，都已经将 元素渲染 到浏览器中

43 运行条件

  ① v-if：更高的切换开销，适用在 运行时条件很少改变 的情况下

  ② v-show： 有更高的初始渲染开销。如果需要非常 频繁地切换 ，建议使用v-show

以上就是条件语句常用的四条指令：v-if，v-else-if，v-else，v-show

  在Vue中，for语句使用 v-for 的指令来 *** 作，具体的结构如下：

  其中，site可以看做是某个特定的元素，而sites则是某个元素所在的集合，可以分成以下几类：

①通过对象的 属性 来迭代对象数据，其结构是： v-for =‘value in object’

② 通过 key-value 的方式迭代对象数据

以上就是关于vue3 Event 事件处理全部的内容，包括:vue3 Event 事件处理、vue 怎么解绑 v-on 指令绑定的事件呢怎么能方便到实现事件委托、Vue.js入门系列(4)--常用指令2等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！