下面的 vue 代碼將動態加載一個 html，我想將這部分 html 渲染到 GUI 中。我該怎么做？
<template>
</template>
<script>
import request from '@/utils/request';
export default {
name: 'Personalinforadm',
data() {
return {
html:''
}
},
created() {
this.loadHtml();
},
methods: {
loadHtml(){
request({ url: '/page/html', method: 'get'})
.then(resp => {
this.html = resp.data;
this.renderHtml();
}).catch(error => {
console.log(error);
});
},
renderHtml(){
// how to render the html into the UI
}
}
}
uj5u.com熱心網友回復：
<template>
<div v-html='html' />
</template>
<script>
import request from '@/utils/request';
export default {
name: 'Personalinforadm',
data() {
return {
html:''
}
},
created() {
this.loadHtml();
},
methods: {
loadHtml(){
request({ url: '/page/html', method: 'get'})
.then(resp => {
this.html = resp.data;
}).catch(error => {
console.log(error);
});
},
}
}
</script>
uj5u.com熱心網友回復：
您可以使用v-html以下方法實作此目的：
<template>
<div v-html="html"></div>
</template>
<script>
import request from '@/utils/request';
export default {
name: 'Personalinforadm',
data() {
return {
html:''
}
},
created() {
this.loadHtml();
},
methods: {
loadHtml() {
request({ url: '/page/html', method: 'get'})
.then(resp => {
this.html = resp.data;
}).catch(error => {
console.log(error);
});
},
}
}
</script>
如您所見，您根本不需要renderHtml方法，因為 vue 會為您完成作業。
順便說一句：我建議您使用 async/await 而不是.then. 在我看來，它使您的代碼更干凈，看起來更專業。
uj5u.com熱心網友回復：
你試過 v-html 嗎？
檔案：https : //br.vuejs.org/v2/guide/syntax.html#HTML
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/397809.html
標籤：Vue.js
上一篇：在Magento2中的產品視圖頁面上單擊產品影像時，如何調整fotoroma庫彈出視窗的大小？
下一篇：按id洗掉打字稿表