Vue中jsx和template循环输出dom

想一想：如果要循环输出h1-h6有没有捷径可走？一般情况下循环输出的都是相同的标签元素。

1.template

我们先来看看循环输出相同标签的写法：
利用v-for

<li v-for="good in goodsList">
...
</li>

如果要循环输出h1-h6，你只能这样写

<h1>h1</h1>
<h2>h2</h2>
..
<h6>h6</h6>

---

这个时候jsx的优势就出来了。

2. jsx

(1)直接输出一组HTML标签数组
循环输出相同标签的写法

  render(h){
    var eles=[];
    for(var i=0;i<6;i++){
      eles.push(<li id={i+'item'}>this is {i+1} item</li>);
    }
    return(
       <div class="hello">
         {eles}
       </div>
      )    
  }

划重点

数组中的元素必须是dom标签元素才能输出dom

循环输出h1-h6
你可以把全部标签写一遍，像下面这样。

var hs=[
<h1>h1</h1>,
<h2>h2</h2>,
...
<h6>h6</h6>
]

这样的话还不如直接写标签。其实createElement()函数，利用这个函数创建并返回一个新的给定类型的元素。
渲染函数 & JSX

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者
  // 解析上述任何一种的一个 async 异步函数，必要参数。
  'div',

  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样，您可以在 template 中使用这些属性。可选参数。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子节点 (VNodes)，由 `createElement()` 构建而成，
  // 或使用字符串来生成“文本节点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

这个函数的第一个参数type就是一个标签名字字符串，我们可以很灵活创建我们需要的元素。
循环输出h1-h6。

  render(h){
    var eles=[];
    for(var i=0;i<6;i++){
      var ele=h(
      'h'+(i+1),
      { 
      },
      [
        'h'+(i+1)
      ]);
      eles.push(ele);
    }
    return(
       <div class="hello">
         {eles}
       </div>
      )    
  }

---

(2)利用数组的map方法

  render(h){
    var eles=[];
    for(var i=0;i<6;i++){
      eles.push(i);
    }
    return(
       <div class="hello">
       {
         eles.map(function(ele,index){
           return(
            <li id={ele+'item'}>this is {ele+1} item</li>
          )})
        }
       </div>
      )    
  }

---

推荐阅读：
React中元素与组件的区别