vue.js - 如何将组件添加到html里？

问题描述

问 题

html代码

<div id="app"> 
      <ul id="test">
      
      </ul>    
</div>
<button type="button">添加li标签</button>    

<template id="tem">
    <li>列表项</li>
</template>

javascript代码

var vm=new Vue({
   el:'#app',
   components:{
    'to-do':{
        template:'#tem'
    }
  }
})

也许是我没说清楚，怎样通过js代码，点击button按钮后把<to-do></to-do>添加到<ul></ul>里。

解决方案

var vm=new Vue({
   el:'#app',
    data{
        isShow:false
    },
   components:{
    to-do: to-do
  },
    methods:{
        btn: function(){
            this.data.isShow = true;
        }
    }
})

<div id="app"> 
      <ul id="test">
          <to-do v-show="isShow"></to-do>
      </ul>    
</div>
<button type="button" @touchstart="btn">添加li标签</button>    

这篇关于vue.js - 如何将组件添加到html里？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！