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 ...
随机推荐
- Java事务不回滚的原因总结
1.首先要检查数据的引擎,InnoDB支持事务,MyIsam不支持事务 2. 默认spring事务只在发生未被捕获的 runtimeexcetpion时才回滚. spring aop 异常 ...
- 如何使用PHP排序key为字母+数字的数组
你还在为如何使用PHP排序字母+数字的数组而烦恼吗? 今天有个小伙伴在群里问: 如何将一个key为字母+数字的数组按升序排序呢? 举个例子: $test = [ 'n1' => 22423, ' ...
- msbuild不是内部或外部命令
首先这个问题纠结了很久,在网上找了查阅了很多博客,大多在介绍介绍批处理为何物,但是就是没有明确的解决方案. 如果想具体了解msbuild是何物,自己查找资料把. 好吧,下面介绍下正确的解决方案. 很简 ...
- 如何检测域名是否被微信屏蔽 微信域名检测接口API是如何实现
微信域名检测技术的主要用户是微信域名防封,大家知道拼多多这种网站,靠诱导分享方式在微信里面摇身一变已经估值160亿美元,身价仅次于京东了 ,这是何等的速度,简直是惊为天人,but 如果你想玩微信病毒营 ...
- loj6519 魔力环
解题思路 考虑顺时针旋转 \(i\) 步得到的结果,根据Burnside引理,有 \[ Ans=\frac{\sum\limits_{i=0}^{n-1}C(i)}{n} \] \(C(i)\) 为旋 ...
- javaweb和数据库的简易商城系统
这是一个基于Javaweb和数据库的简易商城系统.为大二夏季小学期完成. 目录结构 主要功能截图为: 一.购买用户 1.首页(除此界面其余界面访问需要登录才能进入) 查看商品 添加购物车 查看购物车 ...
- find命令计算代码行数
[anonymous@localhost ~/lvs/ipvsadm- -regex '.*Makefile.*' -o -regex '.*\.[ch]' -exec cat {} \; | wc ...
- mac使用frida
mac使用frida 安装 https://github.com/frida/frida/releases 根据手机的cpu的版本,选择相应的文件,一般通过手机信息可以看到 我这里是frida-ser ...
- Postgres copy命令导入导出数据
最近有需要对数据进行迁移的需求,由于postgres性能的关系,单表3000W的数据量查询起来有一些慢,需要对大表进行切割,拆成若干个子表,涉及到原有数据要迁移到子表的需求.起初的想法是使用存储过程, ...
- 【Java/csv】一个CSV文件解析类(转载)
/*下文写得不错,值得学习**/ import java.io.BufferedReader; import java.io.FileReader; import java.util.ArrayLis ...