受到html本身的一些限制，像<ul>、<ol>、<table>、<select>这样的元素里允许包含的元素有限制，而另一些像<option>这样的元素只能出现在某些特定元素的内部。变通的方案是使用特殊的 is 特性

应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：

--------<script type="text/x-template">

--------<javascript>内联模板字符串

--------.vue组件

这句话意思是：

这样不可以

<body>

<div id="app">

<select>

<optioncomp></optioncomp>

</select>

</div>

<script src="lib/vue.js"></script>

<script>

new Vue({

el: '#app',

components:{

'optioncomp':{

template: '<option >a</option>'

}

}

})

</script>

</body>

但是用 is 特殊属性可以

<body>

<div id="app">

<select>

<option is="optioncomp"></option>

</select>

</div>

<script src="lib/vue.js"></script>

<script>

new Vue({

el: '#app',

components:{

'optioncomp':{

template: '<option >a</option>'

}

}

})

</script>

</body>

或者temp模板标签也可以

<body>

<div id="app">

<select>

<option is="optioncomp"></option>

</select>

<!--模板内容存放区域-->

<script type="x-template" id="optioncompTemp">

<option >a</option>

</script>

</div>

<script src="lib/vue.js"></script>

<script>

new Vue({

el: '#app',

components:{

'optioncomp':{

template: '#optioncompTemp'

}

}

})

</script>

</body>

或者内联模板字符串也行

<body>

<div id="app">

<selectcomp></selectcomp>

</div>

<script src="lib/vue.js"></script>

<script>

Vue.component('optioncomp',{

template: '<option >a</option>'

});

new Vue({

el: '#app',

components:{

'selectcomp':{

template: ' <select> <optioncomp></optioncomp></select>'

}

}

})

</script>

</body>

当然了，单页应用的组件文件xxx.vue更是没问题了，就不演示了。

受到html本身的一些限制，像<ul>、<ol>、<table>、<select>这样的元素里允许包含的元素有限制，而另一些像<option>这样的元素只能出现在某些特定元素的内部。变通的方案是使用特殊的 is 特性

应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：

--------<script type="text/x-template">

--------<javascript>内联模板字符串

--------.vue组件

这句话意思是：

这样不可以

  1.  
    <body>
  2.  
    <div id="app">
  3.  
    <select>
  4.  
    <optioncomp></optioncomp>
  5.  
    </select>
  6.  
    </div>
  7.  
    <script src="lib/vue.js"></script>
  8.  
    <script>
  9.  
    new Vue({
  10.  
    el: '#app',
  11.  
    components:{
  12.  
    'optioncomp':{
  13.  
    template: '<option >a</option>'
  14.  
    }
  15.  
    }
  16.  
    })
  17.  
    </script>
  18.  
    </body>

但是用 is 特殊属性可以

  1.  
    <body>
  2.  
    <div id="app">
  3.  
    <select>
  4.  
    <option is="optioncomp"></option>
  5.  
    </select>
  6.  
    </div>
  7.  
    <script src="lib/vue.js"></script>
  8.  
    <script>
  9.  
    new Vue({
  10.  
    el: '#app',
  11.  
    components:{
  12.  
    'optioncomp':{
  13.  
    template: '<option >a</option>'
  14.  
    }
  15.  
    }
  16.  
    })
  17.  
    </script>
  18.  
    </body>

或者temp模板标签也可以

  1.  
    <body>
  2.  
    <div id="app">
  3.  
    <select>
  4.  
    <option is="optioncomp"></option>
  5.  
    </select>
  6.  
     
  7.  
    <!--模板内容存放区域-->
  8.  
    <script type="x-template" id="optioncompTemp">
  9.  
    <option >a</option>
  10.  
    </script>
  11.  
    </div>
  12.  
    <script src="lib/vue.js"></script>
  13.  
    <script>
  14.  
    new Vue({
  15.  
    el: '#app',
  16.  
    components:{
  17.  
    'optioncomp':{
  18.  
    template: '#optioncompTemp'
  19.  
    }
  20.  
    }
  21.  
    })
  22.  
    </script>
  23.  
    </body>

或者内联模板字符串也行

  1.  
    <body>
  2.  
    <div id="app">
  3.  
    <selectcomp></selectcomp>
  4.  
    </div>
  5.  
    <script src="lib/vue.js"></script>
  6.  
    <script>
  7.  
    Vue.component('optioncomp',{
  8.  
    template: '<option >a</option>'
  9.  
    });
  10.  
    new Vue({
  11.  
    el: '#app',
  12.  
    components:{
  13.  
    'selectcomp':{
  14.  
    template: ' <select> <optioncomp></optioncomp></select>'
  15.  
    }
  16.  
    }
  17.  
    })
  18.  
    </script>
  19.  
    </body>

当然了，单页应用的组件文件xxx.vue更是没问题了，就不演示了。

Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：的更多相关文章

  1. React/Vue里的key到底有什么用？看完这篇你就知道了！（附demo代码）

    网上有很多博客讲到,React.Vue里的key,与 Virtual DOM 及 DOM diff 有关, 可以用来唯一标识DOM节点,提高diff效率,云云. 这大致是对的,但是,大多讲得语焉不详, ...

  2. a标签嵌套href默认行为与子元素click事件存在影响

    2018-08-07 Question about work 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当<a>标签内部存在嵌套时, 父元素&l ...

  3. vue DOM模板解析

    当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因为 Vue 只有在浏览器解析.规范化模板之后才能获取其内容.尤 ...

  4. 深入解析Vue里函数的调用顺序介绍

    今天为大家分享一篇对vue里函数的调用顺序介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. method用来定义方法的,比如你@click=& ...

  5. vue之slot，组件标签嵌套

    vue之slot,组件标签嵌套 插槽(Slot),在各种vue的ui插件中,经常见到的多个组件标签相互嵌套(如下)就是以此为基础的. <el-col > <el-checkbox & ...

  6. CVE-2017-11826：Office Open XML 标签嵌套解析混淆漏洞

    \x01 前言 CVE-2017-11826 据说是 360 在 2017 年 9 月底发现的一个关于 XML 格式解析的一个漏洞,之后微软在 10 月份发布了关于 CVE-2017-11826 的补 ...

  7. vue里面的v-for列表循环

    列表渲染 v-for v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. ...

  8. jQuery2.x源码解析(DOM操作篇)

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) jQuery这个类库最为核心重要的功能就是DOM ...

  9. vue实现标签云效果

    闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...

随机推荐

  1. HGOI 20191105 题解

    Problem A Joker 老虎和蒜头是好朋友. 夏天过去了,凉爽的秋天来临,老虎和蒜头又有了新的娱乐项目.老虎有一个远房表亲是西伯利亚虎,那里流行着一个纸牌游戏:两位玩家参与游戏,道具是一副54 ...

  2. FPGA课设-基于Xilinx Basys2开发板的除法器设计

    介绍一下Basys开发板: Basys2 FPGA开发板是一个电路设计实现平台,任何人都可以通过它来搭建一个真正的数字电路.Basys2是围绕着一个Spartan-3E FPGA芯片和一个Atmel ...

  3. python 字符串模板

    from string import Template print(type(Template)) mystr = Template("hi,$name 你是$baby") pri ...

  4. python3 threading.Lock() 多线程锁的使用

    import threadingimport time lock = threading.Lock() #创建锁 def fun(data): try: lock.acquire(True) #锁定 ...

  5. kdc 互信

    环境: 29.3.203.53(sysops00065017) 部署KDC Namnode Datanode,KDC负责TESTA.COM域的认证 29.3.203.54(sysops00065018 ...

  6. 转载： Windows下两种iocp实现的差距

    转自:http://blog.csdn.net/oldworm/article/details/6171430 之前几天说过,因为经典iocp实现(以下简称经典实现)多个io线程绑定在一个iocp上, ...

  7. antd源码分析之——对话框（modal）

    目录 一.组件结构 1.antd代码结构 2.rc-ant代码结构 3.组件结构 二.antd组件调用关系及功能详解 1.Model.tsx 2.confirm 三.rc-dialog详解 1.e.t ...

  8. MySQL-插入更新 ON DUPLICATE KEY UPDATE

    向数据库中插入一条记录,若该数据的主键值(UNIQUE KEY)已经在表中存在,则执行后面的 UPDATE 操作.否则执行前面的 INSERT 操作. 测试表结构 CREATE TABLE `flum ...

  9. oracle获取当前月的第一个星期五

    -to_char(trunc(sysdate,'month'),'D') end || '号是当月的第一个星期五' from dual;

  10. Hibernate3核心API使用

    public static void main(String[] args) throws Exception{ // 1. 加载默认的hibernate.cfg.xml的配置文件 Configura ...