Question

在Vue JS中，我可以做到

<h1 v-if="someCondition">MY TITLE</h1>

有没有一种方法可以使元素类型基于某种条件？

例如，基于someCondition，我希望标题为<h1>或<h2>。

我想我可以使用

<template v-if="someCondition === 0">
  <h1>MY TITLE</h1>
</template>

<template v-if="someCondition === 1">
  <h2>MY TITLE</h2>
</template>

但是有没有更简单的方式写这个？

Answer 1

如果只有2个变体，最好的选择是坚持使用v-if和v-else。

如果还有更多可能的变化形式，那么动态组件是必经之路（https://vuejs.org/v2/guide/components-dynamic-async.html）

<component :is="dynamicComponent">Foo</component>

...

computed: {
  dynamicComponent() {
    return 'h'+this.i
  }
}

依次将其渲染为<h1>，<h2>，<h{i}>。尽管在实际组件之间切换而不是在HTML h标签之间切换时，这更有用。

https://codesandbox.io/s/vue-template-z40u7

Answer 2

这是render函数有用的地方。每当您的模板需要更高级的逻辑时，呈现功能都将使用Javascript及其所有逻辑流功能来生成模板，而不是HTML标记。您可以阅读有关Vue's render functions here的更多信息。

Here is a fiddle演示此示例：

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');
}

Answer 3

except on e:exception do

您的“ someCondition”可以定义为props或data属性，并且其值可以从1到7，以防万一您仅使用“ H标签”

基于条件的VueJS HTML元素类型

3 个答案: