ByteNote LogoByteNote

Navigation

  • Blog
  • 工具

    © 2025 ByteNote. All rights reserved.

    vue 在 v-html 元素中绑定事件

    Jul 3, 202211 min read

    原理: 使用事件代理

    <div class="code-review">
       <div v-html="html" v-highlight @click="htmlClick($event)"></div>
    </div>
     
     
    computed: {
        html () {
          return '<button></button >'
        },
      },
    

    在v-html同级元素中使用事件绑定,然后根据事件触发的目标对象去判断和获取参数。

    htmlClick(event) {
      if(event.target.nodeName === 'img'){
    	// 获取触发事件对象的属性
    	alert("a");
      }
    },
     
    

    相关文章

    CSS中有几种颜色表示方法?快速学习!

    CSS中有五种颜色表示方法:十六进制、RGB、RGBA、HSL和HSLA。

    CA 数字证书 的作用

    CA数字证书用于验证网站身份、加密通信、提供可信度、防伪标识和维护访问安全,同时与浏览器合作确保网站的可信性和数据传输的安全性。

    Mac 终端开启和关闭代理的方法

    通过创建和配置 `openproxy.sh` 和 `closeproxy.sh` 脚本,以及设置别名命令,可以简化在本地机器(127.0.0.1)端口7070上开启和关闭代理的过程。

    解决 next.js document is not defined

    该代码片段通过检查`window`对象是否存在来解决在next.js中使用`document`时出现的“document is not defined”问题。

    Vue3 注册和安装 v 指令

    在 Vue 3 中,通过 `createApp` 创建实例并使用 `app.directive` 注册全局指令,或通过组件选项的 `directives` 字段注册局部指令,定义生命周期钩子函数来实现指令的行为。