使用Vdt标签语法,你无法定义一个可变标签,即:根据传入的参数不同,既可以渲染成<a></a>,又可以渲染成<b></b>

但模板中,用于创建标签的方法h(),可以做到这一点

h(tagName[, attrs, children, className, key, ref])

  • @description 创建虚拟DOM
  • @param tagName {String} 标签名
  • @param attrs {Object} 属性
  • @param children {String | Number | vNode | Array<String | Number | vNode>} 子元素
  • @param className {String} class属性
  • @param key {String} key属性
  • @param ref {Function} 用于引用到元素

该函数创建一个虚拟DOM。下例展示如何通过它创建<a>

    1. h('a', {href: '//www.baidu.com'}, ['百度官网']);

有了它我们就可以创建可变标签了

    1. var Button = function(attrs) {
    2. return h(attrs.tagName || 'button', attrs.properties, attrs.children);
    3. }
    4. <div>
    5. <Button tagName="a" properties={{href: '//www.baidu.com'}}>a标签按钮</Button>
    6. <Button tagName="button">button标签按钮</Button>
    7. </div>