1、问题展示：
其一、单文件组件的代码：
<template>
<div v-html="afterHtml"></div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
},
methods: {
afterHtml() {
return '这就是 div 里的信息'
}
}
}
</script>
<style scoped>
div {
margin-top: 20px;
color: red;
}
</style>
其二、页面显示：
翻译为：
函数 () { [本机代码] }
2、问题分析：
其一、想要的结果是：
页面显示为：这就是 div 里的信息
其二、报错结果分析：
可能是在 html 中引用的语法不对
3、解决过程：
方法一：在 html 中用 afterHtml() 语法,在 methods 中定义方法;
// 注意：此时 html 中的语法为：afterHtml();
其一、代码为：
<template>
<div v-html="afterHtml()"></div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
},
methods: {
afterHtml() {
return '这就是 div 里的信息'
}
}
}
</script>
<style scoped>
div {
margin-top: 20px;
color: red;
}
</style>
其二、页面展示为：
方法二：在 html 中用 afterHtml 语法,在 computed 中定义方法;
其一、代码为：
// 注意：此时 html 中的语法为：afterHtml;
<template>
<div v-html="afterHtml"></div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
},
computed: {
afterHtml() {
return '这就是 div 里的信息'
}
}
}
</script>
<style scoped>
div {
margin-top: 20px;
color: red;
}
</style>
其二、页面展示为：
4、小结：
其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482