我有一個html字串，其中包含一些用{{}}包裹的變數。有沒有辦法觸發對html的決議，用teamplate中已經存在的值替換{{}}呢
？<div v-html="desc"></div>
desc = "<p>一些文本{{aVar}}</p>"
我希望能夠做這樣的事情
v-html="parse(desc)"
并且{{aVar}}被替換成實際可用的值。 希望有Vue的方法可以做到這一點，但我肯定可以使用一個自定義的方法，自己替換這些值。
謝謝你
uj5u.com熱心網友回復：
目前我用
解決了這個問題function parseHtml(html = "" ) {
const expose = {
播放器。
};
return html.replace(/{{(. ?)}}/g, (_, g) => {
return _get(expose, g);
});
}
其中_get是lodash _.get
uj5u.com熱心網友回復：
<script setup>/span>
import { ref } from 'vue'/span>
const msg = ref('Hello World! ' )
const parse = (text) => (`<span style="color: red">${text}<span>`)
</script>
<template>/span>
< input type="text" v-model="msg">
<div v-html="parse（msg）"> </div>>
</template>/span>
uj5u.com熱心網友回復：
從你的例子中得到啟發 @orbitory 這個呢？
選項API
<script>
export default {
data（） {
return {
template: `<p> {{ message }}. {{ message2 }}</p>`,
message: "hello"。
message2: "world"。
};
},
methods: {
parse（html） {
return html.replace(/{{(. ?)}}/g, (_, g) => /span> {
return this[g.trim() ] 。
});
},
},
};
</script>>
<template>/span>
<input v-model="message">
<input v-model="message2"/span>>
<div v-html="parse(template)" />
</template>
帶有反應式輸入欄位示例的演示。
Composition API
<script setup>/span>
import { ref } from 'vue'/span>
let template = "<p> {{ message }}} <p> {{ message2 }} </p>"
let message = ref('hello'/span>)
let message2 = ref('world')
let data = { message, message2 }
function parse（html） {
return html.replace(/{{(. ?)}}/g, (_, g) => /span> {
return this[g.trim() ].value。
});
}
parse = parse.bind(data)
</script>>
<template>
<input v-model="message">
<input v-model="message2"/span>>
<div v-html="parse（template）"> </div>>
</template>/span>
帶有反應式輸入欄位的演示--基于 @tauzN 的例子。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/327586.html
標籤：
上一篇：我們如何在asp.netmvc和core中管理會話？
下一篇：vuex中的未知突變型別