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有哪些需要注意的地方,纯个人自学笔记,希望对大家有帮助。

Logo

前往低代码交流专区

更多推荐