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 ...
随机推荐
- CSP-S 模拟测试57题解
人生第一次A,B层一块考rank2,虽然说分差没几分,但还是值得纪念. 题解: T1 天空龙: 大神题,因为我从不写快读也没有写考场注释的习惯,所以不会做,全hzoi就kx会做,kx真大神级人物. T ...
- centos 安装mariadb 替代mysql
yum install mariadb-server mariadb systemctl start mariadbmysql -uroot -p默认密码mysql -uroot -pmysql_se ...
- json常用的注解
json注解: 1.@JsonIgnoreProperties: 此注解是类注解,作用是json序列化时将java bean中的一些属性忽略掉,序列化和反序列化都受影响. 写法将此标签加在model ...
- Turtle库画小猫咪
视频请点击这里哟 这个是用python库画的小猫咪,前面一步步的画整个猫的整个身体,具体步骤都写在了注释之中.身体部分画的比较快,后面画了5个心,由于画心的时候要改变好多度数,而且每次只前进一点点,所 ...
- Beta冲刺(1/4)
队名:福大帮 组长博客链接: https://www.cnblogs.com/mhq-mhq/p/11990568.html 作业博客 : https://edu.cnblogs.com/campus ...
- Reflexil
https://github.com/sailro/Reflexil/issues/47 Instructions on how to install Reflexil would be much a ...
- 使用 usb 调试的时候，连接上电脑没反应
使用 usb 调试的时候,连接上电脑没反应 原因: 手机上没有信任本计算机的授权,请在手机上信任该授权 解决方法: 原因就是手机上会有一个弹话框,让我们信任该计算机,我们才可以进行 usb调试 我们的 ...
- MySQL-插入更新 ON DUPLICATE KEY UPDATE
向数据库中插入一条记录,若该数据的主键值(UNIQUE KEY)已经在表中存在,则执行后面的 UPDATE 操作.否则执行前面的 INSERT 操作. 测试表结构 CREATE TABLE `flum ...
- Spring数据分析思维课
本文目录 一.杂 二.四大行业数据分析 1.工具 1.电商数据分析——以京东为例 2.sql常见问题 2.互联网金融——以芝麻信用为例 3.数据异常排查 3.游戏行业——以欢乐斗地主为例 4.融入 ...
- visible,invisible和GONE的区别
在Android开发中,大部分控件都有visibility这个属性,其属性有3个分别为“visible ”.“invisible”.“gone”.主要用来设置控制控件的显示和隐藏.有些人可能会疑惑In ...