DOM模版解析受限制的元素table
发布于 4个月前 作者 yifon 281 次浏览 来自 问答

官网中说: 当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意,像

      、、<select> 这样的元素里允许包含的元素有限制,而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。 应当注意,如果使用来自以下来源之一的字符串模板,则没有这些限制: <script type="text/x-template"> JavaScript 内联模板字符串 .vue 组件

      我这样写:

       <div id="example-1">     
      
              <table>
              <!--使用字符串模版则没有限制-->
              <my-component></my-component>
               </table>
          </div>
          <script type="text/x-template" id="myComponent">
          <div>My component!</div>
          </script>
          <script>
              Vue.component('my-component', {
                      template: '#myComponent'
               });
              let example1 = new Vue({
                      el: "#example-1"
               });
      </script>
      

      但是结果还是渲染成:

      屏幕快照 2018-04-20 下午9.51.12.png
      自定义组件并没有在table内,是我的理解错了?

      回到顶部