gpt4 book ai didi

javascript - Vuetify v 对话框中的 HTML

转载 作者:行者123 更新时间:2023-12-02 23:11:57 25 4
gpt4 key购买 nike

我正在尝试将格式化的 HTML 添加到 v-dialog 的内部。我里面有一张 v 卡,但我把它撕掉了,这样我就可以从头开始。这是我到目前为止所拥有的

       <v-dialog v-model="dialogPubs" scrollable max-width="950px">      
<div>{{editedItem.Publication}}</div>
</v-dialog>

{{editedItem.Publication}} 包含带颜色变化的格式化 HTML 以及超链接。我已经看到使用 v-card 的 v-text 和 v-html 应该可以工作,但它不适合我。

我有一个数据表,当我双击一行时,会弹出带有格式化 HTML 的对话框,但我得到的是直接文本。如果我需要将 v 卡放回去,只要我可以渲染 HTML 就可以了。谢谢。

最佳答案

请仔细检查您如何使用v-html。您需要在包含 HTML 的元素上使用它,并且需要将其添加为绑定(bind)到包含 HTML 字符串的 data 属性的属性。请参阅下文。

new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
show: true,
stuff: "<span><strong>hello</strong> <span>world</span></span>"
};
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
<v-app>
<v-content>
<v-layout>
<v-dialog v-model="show" scrollable max-width="950px">
<v-card>
<div v-html="stuff"></div>
</v-card>
</v-dialog>
</v-layout>
</v-content>
</v-app>
</div>

关于javascript - Vuetify v 对话框中的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57316865/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com