实际开发中遇见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>
实测有效