vue 在 v-html 的 html 字符串中绑定事件以及获取 v-html 渲染出来的元素_如何提取v-html=‘this.content的值’

html

<div id="father" @click="handleHtml($event)">
  <div id="vhtml" v-html="content" />
</div>
1
2
3

js

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

handleHtml($event) {
  console.log($event)
  console.log($event.target)
  console.log($event.target.className)
  console.log($event.target.innerHTML)
  console.log($event.target.innerText)
  // if ($event.target.className === 's14' && $event.target.innerText) {
  //   this.$router.push({
  //     path: '',
  //     query: {
  //       imgs: $event.target.innerText
  //     }
  //   })
  // }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

v-html 通过css选择器获取其中的元素

mounted() {
  this.$nextTick(() => {
    setTimeout(() => {
      console.log(document.querySelector('#report1 .s14'))
      console.log(123131231323123)
      console.log(document.getElementById('report1'))
    }, 1000)
  })
},
1
2
3
4
5
6
7
8
9

参考链接