vue jsx 使用指南及vue.js 使用jsx语法的方法
编程学习 2021-07-04 17:32www.dzhlxh.cn编程入门
这篇文章主要介绍了vue jsx 使用指南及vue.js 使用jsx语法的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
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)
// methods
this.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>
{/*注释...*