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

基于條件的VueJS HTML元素類型

首頁猿問基于條件的VueJS HTML元素類型

基于條件的VueJS HTML元素類型

JavaScript

蠱毒傳說 2021-05-31 10:47:39

在 Vue JS 中，我可以做到<h1 v-if="someCondition">MY TITLE</h1>有沒有辦法將元素類型基于某種條件？例如，基于someCondition我希望我的標題是<h1>or <h2>。我想我可以用<template v-if="someCondition === 0"> <h1>MY TITLE</h1></template><template v-if="someCondition === 1"> <h2>MY TITLE</h2></template>但是有沒有更直接的寫法？

查看完整描述

3 回答

狐的傳說

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

<component :is="'h'+someCondition">MY TITLE</component>

您的“someCondition”可以定義為 props 或 data 屬性，它的值可以從 1 到 6，以防您只使用“H 標簽”

反對回復 2021-06-03

開心每一天1111

TA貢獻1836條經驗獲得超13個贊

這就是render函數有用的地方。每當您的模板需要更高級的邏輯時，渲染函數都會使用 Javascript 及其所有邏輯流能力來生成模板，而不是 HTML 標簽。您可以在此處閱讀有關Vue 渲染函數的更多信息。

這是演示此示例的小提琴：

data() {

return {

someCondition: 1

}

render(h){

let tagType;

if (this.someCondition === 0) {

tagType = 'h1';

} else if(this.someCondition === 1) {

tagType = 'h2';

}

return h(tagType, null, 'MY TITLE');

}

反對回復 2021-06-03

3 回答
0 關注
190 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

基于條件的VueJS HTML元素類型

基于條件的VueJS HTML元素類型

3 回答

添加回答