已解決430363個問題，去搜搜看，總會有你想問的

Vue - 在 HTML 數據中使用計算屬性

首頁猿問 Vue - 在 HTML...

Vue - 在 HTML 數據中使用計算屬性

JavaScript

揚帆大魚 2023-05-25 16:27:07

如何在呈現為 HTML 的數據元素中使用計算屬性的返回值？我有一個 HTML 數據元素，它看起來像這樣：contractContent: `Hi ${this.brideName},`我也試過這個：contractContent: `Hi {{this.brideName}},`我試圖通過這個計算屬性傳入名稱：brideName() { return this.returnContracts[0].brideName.split(' ')[0] },但我得到的只是undefined。如果我只是把brideName這個組件作為測試，它會返回新娘的名字就好了。我哪里誤入歧途了？這是我的困境的小提琴

查看完整描述

2 回答

偶然的你

TA貢獻1841條經驗獲得超3個贊

data()在組件創建時調用并且不是反應性的。contractContent應該是您的代碼工作的計算道具：

export default {

data() {

return {

name: "Martina Navratilova",

}

computed: {

brideName() {

return `Hi ${this.name.split(' ')[0]},`

contractContent() {

return `Hi there ${this.brideName}`

}

更新的小提琴

反對回復 2023-05-25

三國紛爭

TA貢獻1804條經驗獲得超7個贊

而不是使用數據 - >計算 - >數據 - >渲染，直接使用計算 - >渲染（html）

在您的模板中，您可以像這樣呈現 html

假設你的數據結構是returnContracts這樣的

data: {

returnContracts: [

{

"brideName": "Emma Watson"

}

]

}

然后你可以直接從計算的渲染 brideName

brideName(){

// assuming you'll have correct data, if data isn't valid this will cause crash.

return `Hi ${this.returnContracts[0].brideName.split(' ')[0]},`

}

這是一個小提琴來幫助你實施

反對回復 2023-05-25

2 回答
0 關注
230 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Vue - 在 HTML 數據中使用計算屬性

Vue - 在 HTML 數據中使用計算屬性

2 回答

添加回答