vue jsx
语法与 react jsx
还是有些不一样,在这里记录下。
let component = null// if 语句if (true) { component = ( <div></div> ); } else { component = ( <div></div> ); }var ul = ( <ul> {component} </ul> );// map 语句var coms = limit.map(i => { return { <li> {ul} </li> }; })// 属性<li onClick={() => console.log()}>// 自定义指令let directives = [{name: 'prod-img', value: params.row.skn, modifiers: {skn: true}} ];return ( <div> <img {...{directives}}></img> // 属性展开 </div> );// 自定义过滤器不建议使用,直接当函数使用 foo(something)// methodsthis.foo()// model<i-input value={params.row.factoryCode} placeholder='请输入...' onInput={val => (params.row.factoryCode = val)} style={{width: '100%'}}> </i-input>// 自定义事件 return ( <Operator category-id={this.categoryId} // prop绑定 product={params.row} // prop 绑定 onChange={this.onChangeStatus}> // event 绑定 </Operator> );//三元运算 <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div// 注释<div> <h1>菜鸟教程</h1> {/*注释...*/} </div>// html<div>{{_html: '<h1>Hello World!!</h1>'}}</div>// h函数写法return h('Input', { props: { value: params.row.buyingNums }, on: { input: val => { params.row.buyingNums = val; }, 'on-blur': () => { this.update(params); } } });// 所有的事件监听必须以on开头,然后字母大写// template<input @on-change='click'>// jsx<input onOn-change={() => this.click()}></input>
转载于:https://blog.51cto.com/12942149/1944618