• vue在v-html中绑定的点击事件失效处理方法


    实际开发中遇见v-html中绑定的点击事件无效

    主要代码如下:

    vue中代码

    /*@autor:dantaxiaozi @time:2021/4/28 @desc: 解决v-html中点击事件无效的方法*/
    <template>
      <div id="announcementList">
        <div class="affiche_text">
          <p v-html="textContent" @click="triggerClick"></p>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: "announcementList",
      props: {},
      data() {
        return {
          textContent:"测试vue中v-html中绑定点击事件"+"<a style='padding-left:15px;' href='###' class='testClass' id=" + 10001 + ">【详细】</a>",
        };
      },
      filters: {},
      computed: {},
      created() {
      },
      mounted() {
      },
      beforeDestory() {
      },
      methods: {
        // 触发v-html中的点击事件
        triggerClick(event) {
          console.log("获取标签名="+event.target.className) // 获取标签名
          console.log("获取class属性名="+event.target.nodeName) // 获取class属性名
          console.log("获取id值="+event.target.id) // 获取id值
        }
      }
    };
    </script>

    实测有效

  • 相关阅读:
    JS使用 popstate 事件监听物理返回键
    JQ判断div是否隐藏
    SQL Server DATEDIFF() 函数
    取消a或input标签聚焦后出现虚线框
    C#定时任务
    C# 保留N位小数
    C#打印单据
    SQL语句创建函数
    SVN检出新项目
    解决jQuery的toggle()的自动触发问题
  • 原文地址:https://www.cnblogs.com/nginxTest/p/14714305.html
Copyright © 2020-2023  润新知