Question

我的Vue组件是这样的：

<template>
    ...
</template>

<script>

export default {
    methods: { 
        buildDescription () {
            if (!this.description) {
                const div = document.createElement('div')
                let html

                html = "..." /* call element html and store here */

                div.innerHTML = html
                document.querySelector('.v-date-picker-table').append(div)
                this.description = true
            }
        },
    }
}
</script>

请参见html变量。我想从那里调用元素html或组件

这样的html元素：

<template>
    <div>
        <span>
            <div style='float:left; height: 14px; width: 14px; border-radius: 12px;'>
            </div>
        </span>
        <span style='float: left;font-size:12px'>Available</span>
        <span>
            <div style='float:left;height: 14px; width: 14px; border-radius: 12px;'>
            </div>
        </span>
        <span style='float:left; font-size: 12px'>Not available</span>
    </div>
</template>

如何从方法vue调用元素html？

Answer 1

Vue中的DOM操作与原始JavaScript没什么不同。所有document.getElement...函数都很好。

但是，正如您在评论中看到的那样，Vue的要点是在模板中编写所需的任何操作，并使用v指令进行DOM操作。在极少数情况下，您仍然需要使用Vanilla JS来操作DOM。考虑一下为什么要使用框架，以及如何更好地完成框架所需的工作。

Answer 2

export default {
    methods: { 
        buildDescription () {
            if (!this.description) {
                const div = document.createElement('div')
                **let html = this.$refs.myHtml.outerHTML**
                ...
            }
        },
    }
}

<template>
    <div **ref="myHtml"**>
        <span>
            <div style='float:left; height: 14px; width: 14px; border-radius: 12px;'>
            </div>
        </span>
        <span style='float: left;font-size:12px'>Available</span>
        <span>
            <div style='float:left;height: 14px; width: 14px; border-radius: 12px;'>
            </div>
        </span>
        <span style='float:left; font-size: 12px'>Not available</span>
    </div>
</template>

如何通过vue方法调用元素html？

2 个答案: