JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析.
data(){
return {
dataconfig:{
btnGroup:[{
label:"查找",
type: 'search',
},{
label:"删除",
type:'del'
}],
form:{
label:"名字",
value:"",
placeholder:""
},
previewDialog:false,
}
}
}
methods:{
handleInput(value){
this.from.value = value
},
handleSync(value){
this.previewDialog = value
}
}
render(h){
return(
div
{
<!------------v-for的jsx实现------------->
this.dataconfig.btnGroup.map((item, index) =>
<div class="input-item">
<el-button
on-click={(ev) => this.handleClick(ev, item.type)}
type="primary"
size="small"
>{ typeof item.text === 'underfined' ? item.text : ""}
</el-button>
</div>
)
}
<!------------v-model的jsx实现------------->
{
<el-input size="small"
placeholder={form.placeholder}
value={form.Value}
on-input={(value) => this.handleInput(value)} />
}
{
<!------------visible.sync的jsx实现------------->
<el-dialog title="预览"
visible={this.previewDialog}
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
{...{ on: { 'update:visible': this.handleSync, 'close': this.closeDialog } }}
>
<div domPropsInnerHTML={this.previewData}></div>
</el-dialog>
}
{
<!------------
slot-scoped的jsx实现<template slot-scoped="scope">{{scope.row}}</template>------------->
<el-table-column
{
...{
scopedSlots: {
default: scope => {
console.log(scope)
}
}
}
}
>
</el-table-column>
}
</div>
)
}
复制代码