Vue中jsx的最简单用法
2019-08-14 10:36:08来源:博客园 阅读 ()
最终页面显示效果为
<div class="open-service" style="color: #0199f0; cursor: pointer;"> hello <p>world</p> </div>
主页面
parent.vue
<template> <div class="hello"> <vue-test :typeSpan="typeSpan"></vue-test> </div> </template> <script type="text/jsx"> import VueTest from "./jsx/VueTest"; export default { name: 'HelloWorld', components:{ VueTest, }, computed:{ typeSpan(){ return { text:'hello', attrs:{ class:"open-service", style:'color:#0199f0;cursor:pointer' }, } } }, } </script>
子页面child.vue有两种方法
第一种
<script type="text/jsx"> export default { props: { typeSpan:{ type:Object, default:{} } }, created(){ }, methods:{ openContactService(){ alert(1) }, }, render(createElement) { return( <div class={this.typeSpan.attrs.class} style={this.typeSpan.attrs.style} onClick={this.openContactService}> {this.typeSpan.text} <p >world</p> </div> ) } } </script>
第二种
<script type="text/jsx"> export default { props:{ typeSpan:{ type:Object, default:{} } }, methods:{ openContactService(){ alert(1) } }, render(createElement, context) { return createElement( 'div',{ class:this.typeSpan.attrs.class, style:this.typeSpan.attrs.style, on:{ click:this.openContactService } },[ this.typeSpan.text, createElement('p','world'), ] ) } } </script>
这是两个最简单的例子
参考链接 https://cn.vuejs.org/v2/guide/render-function.html
原文链接:https://www.cnblogs.com/ttjm/p/11350988.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- vue.js开发环境搭建教程 2020-03-16
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
- vue-cli中打包图片路径错误的解决方法 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash