Question

我可以使用带有Vue.js实例的静态模板，如下所示。 firstPlaceholder的内容将替换为模板staticTemplate的内容，并正确呈现text属性。（可能需要Chrome才能正常工作。）

但是，如果我动态创建模板，则渲染不起作用。 secondPlaceholder丢失了。也许这是一个时间问题？

=＆gt;如何调整我的代码以使用secondPlaceholder呈现dynamicTemplate？

＆＃13;

<!doctype html>
<html>

<head>
	   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
  
    <template id = "staticTemplate">
      <div>{{text}}</div>
    </template> 
  
    <div id ="firstPlaceholder"></div>
  
    <div id ="secondPlaceholder"></div>      
	
	<script>
    
    	var dynamicTemplate = document.createElement('template');
      dynamicTemplate.id = 'dynamicTemplate';
      var div = document.createElement('div');
      div.innerText = '{{text}}';
      dynamicTemplate.appendChild(div);
      
      var staticTemplate = document.getElementById('staticTemplate');
      document.body.insertBefore(dynamicTemplate, staticTemplate);
    
      new Vue({
        el: '#firstPlaceholder',
        template: '#staticTemplate',
        data: {
          text: 'My first text'
        }
      }); 
      
      new Vue({
        el: '#secondPlaceholder',
        template: '#dynamicTemplate',
        data: {
          text: 'My second text'
        }
      });       
     
	</script>
</body>
</html>

＆＃13;

相关问题：

How to target custom element (native web component) in vue.js?

Answer 1

它不能直接在您的示例中使用，但也许您可以使用Async Components获得所需的结果。

Answer 2

检查Dom template，

HTML Content Template（）元素是一种机制保存页面不会呈现的客户端内容加载但随后可以在运行时使用时实例化的JavaScript。

<template>包含一个内容属性，通常我们会通过此属性读取模板内容。所以你可以将你的html添加到内容中。

如果直接appendChild到<template>，您可以打印出html，然后就会发现没有添加任何内容。

只需修正：只需将dynamicTemplate.appendChild(childDiv)更改为dynamicTemplate.content.appendChild(childDiv)

即可

因为某些浏览器可能不支持<template>，您可能必须使用<div>而不是隐藏它。

PS：我发现有些文件称属性= <template>的内容只读HTMLTemplateElement，可能会使用div代替template更好。

你可以试试vue render()，对你的情况会更好。

function isSupportTemplate() {
  return 'content' in document.createElement('template')
}

function createVueInstance(supported) {
  if(supported) {//check browser whether support template
    var dynamicTemplate = document.createElement('template');
    dynamicTemplate.id = 'dynamicTemplate';
    var childDiv = document.createElement('div');
    childDiv.innerText = 'support <template>: {{text}}-{{text}}';
    dynamicTemplate.content.appendChild(childDiv); //apend your html to template content
    document.body.appendChild(dynamicTemplate)

    var staticTemplate = document.getElementById('staticTemplate');
    document.body.insertBefore(dynamicTemplate, staticTemplate);
  }
  else {
    var dynamicTemplate = document.createElement('div');
    dynamicTemplate.id = 'dynamicTemplate';
    dynamicTemplate.style.display = 'none'
    var childDiv = document.createElement('div');
    childDiv.innerText = 'not support <template>: {{text}}-{{text}}';
    dynamicTemplate.appendChild(childDiv); //append your html to template content
    document.body.appendChild(dynamicTemplate)

    var staticTemplate = document.getElementById('staticTemplate');
    document.body.insertBefore(dynamicTemplate, staticTemplate);
  }

  new Vue({
    el: '#firstPlaceholder',
    template: '#staticTemplate',
    data: {
      text: 'My first text'
    }
  }); 

  new Vue({
    el: '#secondPlaceholder',
    template: '#dynamicTemplate',
    data: {
      text: 'My second text'
    }
  });
}

<!doctype html>
<html>

<head>
	   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
  <button onclick="createVueInstance(isSupportTemplate())">Support Template</button>
  <button onclick="createVueInstance(!isSupportTemplate())">Not Support Template</button>
    <template id = "staticTemplate">
      <div>{{text}}</div>
    </template> 
  
    <div id ="firstPlaceholder"></div>
  
    <div id ="secondPlaceholder"></div>      
	
</body>
</html>

如何为Vue.js实例应用动态创建的模板？

2 个答案: