文档章节

createElement 测试

originDu
 originDu
发布于 2017/05/03 10:35
字数 282
阅读 7
收藏 0

createElement ()

  • 第一个参数标签名,
  • 第二个参数如果嵌套标签就写[],里面继续写createElement,每一个变量就是一个标签
  • 如果不嵌套,第二个参数就写{},里面可以写属性,第三个参数写标签的内容,可以是变量名
<anchored-heading :level="2">Hello world! <p>pp</p></anchored-heading>

...

    Vue.component('anchored-heading', {
        render: function (createElement) {
            //createElement 第一个参数标签名,
            // 第二个参数如果嵌套标签就写[],里面继续写createElement,每一个变量就是一个标签
            // 如果不嵌套,第二个参数就写{},里面可以写属性,第三个参数写标签的内容,可以是变量名
            return createElement('div',
                [
                    createElement('i',  // 第一个i标签
                        [
                            createElement('a', { // 内部的子元素为一个a标签
                                attrs: {
                                    name: headingId,
                                    href: '#' + headingId,
                                    class: 'class'
                                }
                            }, '这是一个a标签')   // 也可以自己写
                        ]
                    ),
                    createElement('span', // 第二个span 标签
                        [
                            createElement('a', {  // 内部的子元素为一个a标签
                                attrs: {
                                    name: headingId, // 可以使用变量名
                                    href: '#' + headingId,
                                    class: 'class'  // 定义样式名
                                }
                            }, this.$slots.default) // 内容,可以使用插槽slot
                        ]
                    )
                ]
            )
        },
        props: {
            level: {    // 获取上组件的参数,并定规则
                type: Number,
                required: true
            }
        }
    })
<script type="text/x-template" id="anchored-heading-template">
  <div>
    <h1 v-if="level === 1">
      <!--<slot name='item'>item</slot>-->
      <slot></slot>
    </h1>
    <h2 v-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-if="level === 6">
      <slot></slot>
    </h6>
  </div>
</script>

© 著作权归作者所有

共有 人打赏支持
originDu
粉丝 1
博文 72
码字总数 22157
作品 0
海淀
2016-10月工作日志

2016-10-18下班后把courseList.js代码弄懂courseList.js上代码的$.ajax()参数与jquery的好像不同,还有 星号前的好像不应该用分号,应该用逗号 2016-10-19学习使用postman测试借口 2016-10-...

LM加强
2016/10/18
15
0
使用createElement()创建checkbox不能设置name属性

今天在使用document.createElement()动态创建复选框时,发现不能为其name赋值,以下是测试代码: Test

kjmeng
2008/08/01
0
0
解码GWT的JS小工具--degwt

degwt是一个解码GWT(google的网页工具包)生成的javascript代码的小工具。使用方法: 1.访问任何开启GWT的站点,例如:http://www.whirled.com/ 。 2.将下边的代码粘贴到地址栏。 javascript...

匿名
2012/05/16
1K
0
初识react(一) 揭开jsx语法和虚拟DOM面纱

为什么学习react react以声明式、组件化、一次学习随处编写的理念深受广大开发者热爱,其重要程度不言而喻。因此值得我们深入学习,此专题主要分享些react中部分源码解析。 jsx简介(js +xml)...

言sir
07/19
0
0
PHP读写XML文件

PHP读写XML文件 author: MoreWindows blog: http://blog.csdn.net/MoreWindows KeyWord: PHP 解析XML DOMDocument XML文件操作 PHP可以方便的生成和读取XML文件。PHP主要通过DOMDocument、D......

长平狐
2012/12/10
110
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac OS 最强鼠标改键软件:BetterAndBetter

官网: http://www.better365.cn 话不多说,先上你们最喜欢的软件界面截图。 通用: 触摸板: 鼠标: 键盘: 情景模式: 文本跳窗(自动跳窗): 四角触发: 工具箱: 脚本: 关于: 说下我目...

故国有明
42分钟前
16
0
Hbase Schema 模型设计注意事项及示例

一、Hbase 数据模型概述 HBase的数据模型也是由表组成,每一张表里也有数据行和列,但是在HBase数据库中的行和列又和关系型数据库的稍有不同。 表(Table): HBase会将数据组织成一张表,表名必...

PeakFang-BOK
今天
6
0
Blockathon(2018)上海竞赛项目成果今天揭晓

开幕式现场 10月19日,Blockathon(2018)上海在黄浦区P2联合创业办公社举行,本次活动由50名区块链开发者组成9支参赛队伍,来自国内外优秀区块链开发团队的20名技术专家担任导师及裁判。9支队...

HiBlock
今天
6
0
微信小程序开发系列六:微信框架API的调用

微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发...

JerryWang_SAP
今天
13
0
5 个用 Python 编写 web 爬虫的方法

大家在读爬虫系列的帖子时常常问我怎样写出不阻塞的爬虫,这很难,但可行。通过实现一些小策略可以让你的网页爬虫活得更久。那么今天我就将和大家讨论这方面的话题。 我刚整理了一套2018最新...

糖宝lsh
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部