关于vue组件的问题

Question

我自己注册了一个组件 想通过点击按钮 将这个组件添加到ul当中，并能被成功渲染，想请问下该怎么做（还是我的思路是错的） 例如：

<div id='test'>
<button v-on:click='AddItem'></button>
<ul></ul>
</div>
<script type="text/javascript">

  Vue.component('list-test',{
     template:`<li v-if='seen'>123<button v-on:click='seen=!seen' >Delete</button></li>`,
 
  data:function(){
      return {seen:true}}

  ,
})

 new Vue({
     el:'#test',
     data:{},
     methods:{}   
     })
 

    </script>

平常可以直接<ul><list-test></list-test></ul>使用
因为不知怎么用vue.js添加 我尝试试了下

methods:{
         AddItem:function(){
             var list =document.querySelector('ul');
             var listChild=document.createElement('list-test');
             list.appendChild(listChild)
         }

检查发现html中确实有<list-test>标签 但是没被渲染

Answer 1

你这个……还是停留在jQuery的使用方式，自己注册的组件都没经过Vue的生命周期渲染，直接appendChild进去的只是web标准的自定义标签而已，建议先熟看Vue官方文档~

Answer 2

我的思路是通过改变变量的值来控制组件的显示和隐藏.

通过按钮来改变变量isShow的值
<ul><list-test v-if="isShow"></list-test></ul>

v-if vs v-show

Answer 3

你可以使用v-for指令来渲染，然后在data里面定义一个数组放你的组件，数组元素属性中定义一个显示的属性为false，这样ul就会渲染出来li但是不显示,接着通过改变显示属性值为true,使用v-show或者v-if来让他显示出来就好了。

<ul id="example-1">
  <li v-for="item in items" v-show="item.show">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo',show:false },
      { message: 'Bar',show:true }
    ]
  }
})```