zoukankan      html  css  js  c++  java
  • 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>

    实测有效

  • 相关阅读:
    linux防火墙关闭与中文显示乱码排错
    linux基础命令
    盒子模块
    表的数据类型
    pymysql模块
    sql综合练习题
    pymysql内置功能
    数据操作
    vue 左侧菜单展示,以及对应的路由配置
    vue 左侧菜单路由实现
  • 原文地址:https://www.cnblogs.com/nginxTest/p/14714305.html
Copyright © 2011-2022 走看看