Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：
受到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组件
这句话意思是：
这样不可以
- <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更是没问题了，就不演示了。
Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：的更多相关文章
- React/Vue里的key到底有什么用？看完这篇你就知道了！（附demo代码）
网上有很多博客讲到,React.Vue里的key,与 Virtual DOM 及 DOM diff 有关, 可以用来唯一标识DOM节点,提高diff效率,云云. 这大致是对的,但是,大多讲得语焉不详, ...
- a标签嵌套href默认行为与子元素click事件存在影响
2018-08-07 Question about work 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当<a>标签内部存在嵌套时, 父元素&l ...
- vue DOM模板解析
当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因为 Vue 只有在浏览器解析.规范化模板之后才能获取其内容.尤 ...
- 深入解析Vue里函数的调用顺序介绍
今天为大家分享一篇对vue里函数的调用顺序介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. method用来定义方法的,比如你@click=& ...
- vue之slot，组件标签嵌套
vue之slot,组件标签嵌套 插槽(Slot),在各种vue的ui插件中,经常见到的多个组件标签相互嵌套(如下)就是以此为基础的. <el-col > <el-checkbox & ...
- CVE-2017-11826：Office Open XML 标签嵌套解析混淆漏洞
\x01 前言 CVE-2017-11826 据说是 360 在 2017 年 9 月底发现的一个关于 XML 格式解析的一个漏洞,之后微软在 10 月份发布了关于 CVE-2017-11826 的补 ...
- vue里面的v-for列表循环
列表渲染 v-for v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. ...
- jQuery2.x源码解析(DOM操作篇)
jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) jQuery这个类库最为核心重要的功能就是DOM ...
- vue实现标签云效果
闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...
随机推荐
- CodeForces Good Bye 2016
A题,水题略过. B题,也水,但是想复杂了.只要运动超出[0,20000]的范围就算不可能了. C题,我自己的方法是解不等式,然后取最大的答案即可.代码如下: #include <stdio.h ...
- godaddy SSL证书不信任
在使用网上教程的部署godaddy证书,会出现证书不受信任的情况. 各别审核比较严格的浏览器会阻止或者要求添加例外.情况如下: 利用在线证书测试工具会提示根证书的内容为空.从而导致证书不受信任. 解决 ...
- InnoDB缓存---InnoDB Buffer Pool
InnoDB Buffer Pool 定义 对于InnoDB存储引擎,不管用户数据还是系统数据都是以页的形式存储在表空间进行管理的,其实都是存储在磁盘上的. 当InnoDB处理客户端请求,需要读取某页 ...
- 黑马vue---15、使用v-model实现简易计算器
黑马vue---15.使用v-model实现简易计算器 一.总结 一句话总结: 用v-model绑定了第一个数,第二个数,操作符,和结果,数据改变他们跟着变,他们变数据也跟着变 select v-mo ...
- Flutter移动电商实战 --（11）首页_屏幕适配方案和制作
1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸 ...
- 数据结构之双端队列（Deque）
1,双端队列定义 双端队列:其两端都可以入列和出列的数据结构,如下图所示,队列后面(rear)可以加入和移出数据,队列前面(front)可以加入和移出数据 双端队列操作: deque=Deque() ...
- 胆机实作（1）——12AU7甲类单端前级
第一次做胆机,选了最经典的单端共阴架构.电路没有什么复杂的,基本就是教科书电路,没有用负反馈,因为我不喜欢负反馈的声音.用电路板做机器焊接也没什么难度,器件找好开焊就行,试做机就不打算找外壳了,也不用 ...
- easyUI之Layout（布局）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 几句简单的python代码完成周公解梦功能
<周公解梦>是靠人的梦来卜吉凶的一本于民间流传的解梦书籍,共有七类梦境的解述.这是非常传统的中国文化体系的一部分,但是如何用代码来获取并搜索周公解梦的数据呢?一般情况下,要通过爬虫获取数据 ...
- HDFS的基础与操作
一 HDFS概念 1.1 概念 HDFS,它是一个文件系统,全称:Hadoop Distributed File System,用于存储文件通过目录树来定位文件:其次,它是分布式的,由很多服务器联合起 ...