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 ...
随机推荐
- 洛谷 P1706 全排列
可能是最简单的题了……讲真搜索hhh 洛谷 P1706 全排列问题 题目描述 输出自然数1到n所有不重复的排列,即n的全排列,要求所产生的任一数字序列中不允许出现重复的数字. 输入输出格式 输入格式: ...
- 虚拟视点demo
2019年7月16日15:55:11 感觉虚拟视点也是视觉slam里头一个重要的需求和应该实现的功能,但是好像 没看到什么资料. 百度的全景地图,或者有些公司网站上的3d装修效果图,可以用鼠标拖动查看 ...
- Codeforces 959D. Mahmoud and Ehab and another array construction task(构造, 简单数论)
Codeforces 959D. Mahmoud and Ehab and another array construction task 题意 构造一个任意两个数都互质的序列,使其字典序大等于a序列 ...
- golang 文件导入数据追加sheet
func ReadXlsx(c []CmdbTest, SheetName string) error { //打开文件,如果文件不存在创建,存在就打开 path := ". ...
- FFmpeg之Linux下编译与调试
注:下面的一切都是在 root 模式下进行的,可以不再 root 模式下进行 1. 安装linux的基础环境 基础环境就是编译代码的基础库,Ubuntu联网安装软件很简单,一个语句即可搞定,这里列出语 ...
- 阿里云 docker image 加速
使用的国内网络下载docker image太困难了,简直龟速,于是上网查看如何加速docker image的下载,没想到网上还真有,看来现在自己的知识圈子太小了,还需要多接触新的知识.找到第一个atu ...
- Android局部更新(RecyclerView+ DiffUtil)
一 概述 DiffUtil是support-v7:24.2.0中的新工具类,它用来比较两个数据集,寻找出旧数据集->新数据集的最小变化量. 说到数据集,相信大家知道它是和谁相关的了,就是我的最爱 ...
- OriginPro 9.1 科研图标绘制入门
OriginPro 9.1 科研图标绘制入门 目的:1.介绍如何不用编程画出复杂多样的图表2.介绍OriginLab 常用功能3.科研报告时,有效绘图,省却时间 科研发展需求.反映专业形象.满足公司要 ...
- 数据结构之AVL
简介: 一棵AVL树有如下必要条件: 条件一:它必须是二叉查找树.(左<根<右) 条件二:每个节点的左子树和右子树的高度差至多为1. AVL相关概念: 平衡因子:将二叉树上节点的左子树高度 ...
- Dubbo架构与底层实现
一.Dubbo的设计角色 (1)系统角色Provider: 暴露服务的服务提供方.Consumer: 调用远程服务的服务消费方.Registry: 服务注册与发现的注册中心.1Monitor: 统计服 ...