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 ...
随机推荐
- 透彻网络流-wfx-最大流
前提: 我们想象一下自来水厂到你家的水管网是一个复杂的有向图,每一节水管都有一个最大承载流量.自来水厂不放水,你家就断水了.但是就算自来水厂拼命的往管网里面注水,你家收到的水流量也是上限(毕竟每根水管 ...
- 牛券Cow Coupons
USACO12FEB 久违的奶牛题. 题意: FJ准备买一些新奶牛,市场上有 $ N $ 头奶牛 $ (1 \leq N \leq 50000) $ ,第i头奶牛价格为 $ P_i (1 \leq P ...
- 1.3 JAVA规范以及基础语法（if条件和循环）
一.规范以及运算符 1.命名规则 类名大驼峰规则方法名.变量名小驼峰原则常量大写.下划线分开见名释义.不与关键字冲突 关键字链接:https://www.runoob.com/java/java-ba ...
- 7. 使用Hystrix实现微服务的容错处理
使用Hystrix实现微服务的容错处理 7.1. 实现容错的手段 7.1.1. 雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整 ...
- 我的zshrc文件设置备份
# If you come from bash you might have to change your $PATH. # export PATH=$HOME/bin:/usr/local/bin: ...
- 2018-2019-2 20175227张雪莹《Java程序设计》实验四 《Android程序设计》
2018-2019-2 20175227张雪莹<Java程序设计> 实验四 <Android程序设计> 实验报告封面 课程:Java程序设计 班级:1752班 姓名:张雪莹 学 ...
- No Desktop License Servers available to provide a license
远程桌面连接失败,提示:“no Remote Desktop License Servers available to provide a license” 原因:没有remote desktop l ...
- MAC下STF安装及踩坑
[Mac OS X]brew: command not found ruby -e"$(curl -fsSL https://raw.githubusercontent.com/Homebr ...
- Java-LockSupport
LockSupport 和 CAS 是 Java 并发包中很多并发工具控制机制的基础,它们底层其实都是依赖 Unsafe 实现. LockSupport 提供 park() 和 unpark() 方法 ...
- MySQL使用空事务解决slave从库errant问题
MySQL集群一般部署为主从架构,主库专门用于写入数据,从库用于读数据. 异常情况下,在从库上写入数据,就会出现主从数据不一致问题,称为errant. 如果从库上的这些数据主库上已经有了,或者主库不需 ...