一.使用is解决标签渲染中的小bug1.如下代码,将表格中的<tr><td></td></tr>组件化<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title> <!– 开发环境版本,包含了有帮助的命令行警告 –><script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body> <div id=“app” > <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table> </div> <script> //定义全局组件 Vue.component(‘row’,{ template: <tr> <td>啦啦啦</td> </tr>
}), new Vue({ el:’#app’ }) </script></body></html>运行结果图示乍一看是对的,但是细心的小伙伴会发现,组件row明明是引用在tbody中,但是在运行之后会发现:组件解析到外面去了 这是一个bug2.解决方法:上出现的原因是因为在html5中,tbody下必须为tr,如果是row就违背了html5的规范。那么我们就这样写:<table> <tbody> <tr is=“row”></tr> <tr is=“row”></tr> <tr is=“row”></tr> </tbody></table>使用is运行结果图示:这时候会发现<tr><td></td></tr>成功解析到tbody中了3.其他可能会产生此bug的标签selectulol等等