Vue里标签嵌套限制问题解决

最新推荐文章于 2024-06-14 14:55:48 发布

sMoom

最新推荐文章于 2024-06-14 14:55:48 发布

阅读量4k

点赞数

分类专栏： Vue

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

受到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更是没问题了，就不演示了。

sMoom

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue里标签嵌套限制问题解决

受到html本身的一些限制，像、、、这样的元素里允许包含的元素有限制，而另一些像这样的元素只能出现在某些特定元素的内部。变通的方案是使用特殊的 is 特性应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：----------------内联模板字符串--------.vue组件这句话意思是：这样不可以
复制链接

扫一扫