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

Stack Overflow用户

提问于 2018-04-25 08:52:43

回答 2查看 256关注 0票数 0

我能够在Vue.js实例中使用静态模板，如下所示。将firstPlaceholder的内容替换为模板staticTemplate的内容，并正确呈现text属性。(可能需要Chrome正常工作。)

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

=>How我可以修改我的代码来使用dynamicTemplate来呈现secondPlaceholder

<!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>

有关问题：

如何在vue.js中针对自定义元素(本地web组件)？

javascript

templates

vue.js

人脸核身产品特惠

用户政务民生、金融、通信运营商等场景，接入全面，安全可靠新用户3折起

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-04-25 09:22:52

检查Dom模板，

()元素是一种保存客户端内容的机制，在加载页面时不呈现该机制，但随后可以使用JavaScript在运行时进行实例化。

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

如果直接appendChild到<template>，就可以打印出html，那么就不会发现任何已经添加的内容。

简单地修复:只需将dynamicTemplate.appendChild(childDiv)更改为dynamicTemplate.content.appendChild(childDiv)即可

因为有些浏览器可能不支持<template>，所以您可能不得不使用<div>而不是隐藏它。

PS:我发现了一些文件说attribute=content of <template>是只读的HTMLTemplateElement，可能用div代替template会更好。

也你可以试试vue呈现()，这样会更适合你的情况。

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>