如何在 Vuetify 国际化中插入 <a> 标签或图标?
How to insert a <a> tag or icon inside Vuetify internationalization?
我目前正在从事一个基于 Vuetify
的项目。我需要在国际化文本中插入一个 <a>
标签和图标。一般插入一个变量很容易,如下所示,
this.$vuetify.lang.$t('I'm {0}', varirable_name)
但是这样,我无法插入<a>
标签或图标<v-icon>
,我该如何实现呢?
就这样,
`this.$vuetify.lang.$t('Here is an icon {0} and a {1}', <v-icon />, <a>link</a>)`
您可以使用 v-html
指令输出原始 HTML。它适用于基本标签,但不适用于 Vuetify 的 v-tags(例如,v-icon
)。
new Vue({
vuetify: new Vuetify(),
data() {
return {
message: this.$vuetify.lang.t('Here is an bold {0} and a {1}', "<strong>text</strong>", "<a>link</a>")
}
}
}).$mount('#app')
<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@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container><span v-html="message"></span ></v-container>
</v-main>
</v-app>
</div>
<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>
我不建议在复合格式字符串中使用 Vuetify 标签。相反,翻译标签内的文本。
<v-btn class="ma-2" color="primary" dark>
Accept // <- translate only this
<v-icon dark right>
mdi-checkbox-marked-circle
</v-icon>
</v-btn>
我目前正在从事一个基于 Vuetify
的项目。我需要在国际化文本中插入一个 <a>
标签和图标。一般插入一个变量很容易,如下所示,
this.$vuetify.lang.$t('I'm {0}', varirable_name)
但是这样,我无法插入<a>
标签或图标<v-icon>
,我该如何实现呢?
就这样,
`this.$vuetify.lang.$t('Here is an icon {0} and a {1}', <v-icon />, <a>link</a>)`
您可以使用 v-html
指令输出原始 HTML。它适用于基本标签,但不适用于 Vuetify 的 v-tags(例如,v-icon
)。
new Vue({
vuetify: new Vuetify(),
data() {
return {
message: this.$vuetify.lang.t('Here is an bold {0} and a {1}', "<strong>text</strong>", "<a>link</a>")
}
}
}).$mount('#app')
<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@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container><span v-html="message"></span ></v-container>
</v-main>
</v-app>
</div>
<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>
我不建议在复合格式字符串中使用 Vuetify 标签。相反,翻译标签内的文本。
<v-btn class="ma-2" color="primary" dark>
Accept // <- translate only this
<v-icon dark right>
mdi-checkbox-marked-circle
</v-icon>
</v-btn>