Vue JSX

readme

Github.com/vuejs/jsx/t…

The sample

CRP SRC \ Page \productManagement\planInventory\liner\basic\subs\bus\comps\ TableInputer.js

slot

<div class="table-input">
  { h('div', this.$slots.default) }
</div>
Copy the code

for

Jia qi group, CRP SRC/page/productManagement/regimentPlan/children/liner/OrderMaker/comps CabinGround/comps LinkTitleBar/index. Js

<div class="scroll-body">
  {
    this.list.map((el, index) => {
      return <div class={{ 'bar-outer': true, selected: el.selected }}
        key={ el.id }
        onClick={ this.clickHandler.bind(this, index) }>
        <div class="title-text"
          title={ el.label }>
          { el.label }
        </div>
        {
          this.options.deletable? <div class="close-btn"
            onClick={ this.closeHandler.bind(this, index) }>
            <i class="el-icon-close"></i>
          </div>: null
        }
      </div>
    })
  }
</div>
Copy the code

1. Binds an object value to the specified attribute:class={{ 'bar-outer': true, selected: el.selected }}Double curly braces, common value binding, single curly braceskey={ el.id }
2. Bind events:$eventIs the default parameter of the event

closeHandler(index, $event){
    ...
}
Copy the code