文档章节

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
博文 68
码字总数 19897
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HTTPS is easy

HTTPS is easy https://www.troyhunt.com/https-is-easy/ HTTPS is easy! In fact, it's so easy I decided to create 4 short videos around 5 minutes each to show people how to enable ......

openthings
30分钟前
0
0
bugList 2

用户端: 1. 上传文件时,当选择:彩色-A3-双面时,第二个图片有bug 应改为 和第一个图片的类型相同 2. 确认打印时,三个下拉选目前有bug 应改为:根据后台配置的商家,group by计算出不同城...

勇恒
33分钟前
2
0
keras cnn 网咯 mnist 分类

搭建貌似比tf是简单很多。。。。。 from keras.datasets import mnistfrom keras.utils import np_utilsfrom keras.models import Sequentialfrom keras.layers import Dense, Activat......

阿豪boy
35分钟前
0
0
解决 /var/run/nginx.pid failed

nginx: [error] open() "/var/run/nginx.pid" failed (2: No such file or directory) sudo nginx -c /etc/nginx/nginx.conf nginx -s reload...

驛路梨花醉美
37分钟前
0
0
nginx负载均衡-ssl原理-生成ssl密钥对-nginx配置ssl

nginx负载均衡: 1.创建配置文件 vim /usr/local/nginx/conf/vhost/load.conf #添加以下内容: upstream qq_com #名字自定义,借助此模块定义多个IP,后面...

ZHENG-JY
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部