在tsx里写html模板,在Vue中写TSX有哪些需要注意的地方
v-html使用domPropsInnerHTML来替代v-htmldomPropsInnerHTML={this.topicDetail.content}class="markdown-body">loading...v-if使用三元操作符来替代v-if{this.preFlag ? ...... : ""}v-for使用map遍历替代v-for{this.pageBtnList.map(
v-html
使用domPropsInnerHTML来替代v-html
domPropsInnerHTML={this.topicDetail.content}
class="markdown-body"
>
loading...
v-if
使用三元操作符来替代v-if
{this.preFlag ? ...... : ""}
v-for
使用map遍历替代v-for
{this.pageBtnList.map(page => {
return (
onClick={this.changePageHandler.bind(this, page)}
class={[{ currentPage: page === this.currentPage }, "pageBtn"]}
>
{page}
);
})}
render
注意:在render函数中的组件名一定用kebab-case命名
protected render() {
return (
© 2020 Designed By Enoch Qin
码云笔记 >>
);
}
onClick事件传值(TSX)
使用template的时候,如果用v-on绑定事件,想要传参的话,可以直接这么写:
click me
但是在TSX中,如果直接这么写,就相当于立即执行了clickHandle函数:
render(){
// 这样写是不行的!!
return click me
}
因此,我们不得不使用bind()来绑定参数的形式传参:
render(){
return click me
}
结语
以上就是今天码云笔记为大家带来的关于在Vue中写TSX有哪些需要注意的地方,纯个人自学笔记,希望对大家有帮助。
更多推荐
所有评论(0)