Vue入门 Demo13 组件上面的小细节

最新推荐文章于 2025-01-06 15:33:09 发布

原创最新推荐文章于 2025-01-06 15:33:09 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍Vue中使用is属性解决HTML5标签在组件化时出现的bug，通过实例展示了如何利用is属性确保组件正确渲染，特别是在tr标签作为组件时需要在tbody内正确显示的情况。

Vue入门 Demo13 组件上面的小细节

<!DOCTYPE html>
<html lang="en"> 
    <head> 
        <meta content="text/html; charset=utf-8" /> 
        <title>Vue中的组件的细节点</title> 
        <script src="./vue.js"></script>
        
    </head> 
    <body>
        <!-- is属性解决h5标签上面的小bug,要求在控制台查看tr在tbody的包裹下;包括ul,ol,select等标签-->
        <div id="app">  
            <table>
                <tbody>
                    <tr is="row"></tr>
                    <tr is="row"></tr>
                    <tr is="row"></tr>
                </tbody>
            </table>
        </div>
        <script>

            Vue.component('row',{
                template: '<tr><td>this is a row</td></tr>'
            })

            var vm = new Vue({
                el: "#app",
            })
        </script> 
    </body> 
</html>