Vue this.$refs获取DOM下子元素
<template>
<div class="subject">
<div
v-html="insertedStr"
@input="htmlHandler($event)"
class="inputBox"
ref="htmlInput"
></div>
</div>
</template>
<script>
export default {
data() {
return {
insertedStr: "你就是超级塞牙人******啊啊啊啊啊",
};
},
created() {
this.editStr();
},
methods: {
editStr() {
this.insertedStr = this.insertedStr.replace(
"******",
"<input type='text' class='QQ' >"
);
},
htmlHandler(e) {
console.log(this.$refs.htmlInput.firstElementChild);
},
},
};
</script>
<style lang="less" scoped>
.subject {
width: 100%;
height: 100%;
}
.inputBox {
height: 50px;
width: 600px;
}
.QQ {
border: none;
}
</style>