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

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

sMoom

4105人浏览 · 2018-01-18 11:10:16

sMoom · 2018-01-18 11:10:16 发布

受到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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^