设为首页收藏本站

Java自学者论坛

 找回密码
 立即注册

手机号码，快捷登录

恭喜Java自学者论坛（https://www.javazxz.com）已经为数万Java学习者服务超过8年了！积累会员资料超过10000G+！
成为本站VIP会员，下载本站10000G+会员资源，会员资料板块，购买链接：点击进入购买VIP会员
Java自学者论坛»论坛 › IT知识库 › WEB前端 › Vue里标签嵌套限制问题解决------解析DOM模板时注意事项 ...

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习（CNN RNN GAN）算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万！人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
返回列表 发新帖
查看: 1310|回复: 0

Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：

[复制链接]
admin
  • TA的每日心情
    奋斗
    2025-3-18 14:43

    • 签到天数: 805 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    73万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    731050
    发表于 2021-9-5 16:23:56 | 显示全部楼层 |阅读模式
    本站已经为数万IT学习者服务超过8年！成为本站VIP会员，免金币下载本站10000G+VIP会员资料！       所有VIP资料>>

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

    这句话意思是：

    这样不可以

     

    1.  
      <body>
    2.  
      <div id="app">
    3.  
      <select>
    4.  
      <optioncomp> </optioncomp>
    5.  
      </select>
    6.  
      </div>
    7.  
      <script src="lib/vue.js"> </script>
    8.  
      <script>
    9.  
      new Vue({
    10.  
      el: '#app',
    11.  
      components:{
    12.  
      'optioncomp':{
    13.  
      template: '<option >a</option>'
    14.  
      }
    15.  
      }
    16.  
      })
    17.  
      </script>
    18.  
      </body>

    但是用 is 特殊属性可以

     

    1.  
      <body>
    2.  
      <div id="app">
    3.  
      <select>
    4.  
      <option is="optioncomp"> </option>
    5.  
      </select>
    6.  
      </div>
    7.  
      <script src="lib/vue.js"> </script>
    8.  
      <script>
    9.  
      new Vue({
    10.  
      el: '#app',
    11.  
      components:{
    12.  
      'optioncomp':{
    13.  
      template: '<option >a</option>'
    14.  
      }
    15.  
      }
    16.  
      })
    17.  
      </script>
    18.  
      </body>

    或者temp模板标签也可以

    1.  
      <body>
    2.  
      <div id="app">
    3.  
      <select>
    4.  
      <option is="optioncomp"> </option>
    5.  
      </select>
    6.  
       
    7.  
      <!--模板内容存放区域-->
    8.  
      <script type="x-template" id="optioncompTemp">
    9.  
      <option >a </option>
    10.  
      </script>
    11.  
      </div>
    12.  
      <script src="lib/vue.js"> </script>
    13.  
      <script>
    14.  
      new Vue({
    15.  
      el: '#app',
    16.  
      components:{
    17.  
      'optioncomp':{
    18.  
      template: '#optioncompTemp'
    19.  
      }
    20.  
      }
    21.  
      })
    22.  
      </script>
    23.  
      </body>

    或者内联模板字符串也行

     

    1.  
      <body>
    2.  
      <div id="app">
    3.  
      <selectcomp> </selectcomp>
    4.  
      </div>
    5.  
      <script src="lib/vue.js"> </script>
    6.  
      <script>
    7.  
      Vue.component( 'optioncomp',{
    8.  
      template: '<option >a</option>'
    9.  
      });
    10.  
      new Vue({
    11.  
      el: '#app',
    12.  
      components:{
    13.  
      'selectcomp':{
    14.  
      template: ' <select> <optioncomp></optioncomp></select>'
    15.  
      }
    16.  
      }
    17.  
      })
    18.  
      </script>
    19.  
      </body>

    当然了，单页应用的组件文件xxx.vue更是没问题了，就不演示了。

    vue
    哎...今天够累的，签到来了1...
    回复

    使用道具 举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2025-10-31 16:29 , Processed in 0.101172 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表