關(guān)于vue組件的問(wèn)題

我自己注冊(cè)了一個(gè)組件想通過(guò)點(diǎn)擊按鈕將這個(gè)組件添加到ul當(dāng)中，并能被成功渲染，想請(qǐng)問(wèn)下該怎么做（還是我的思路是錯(cuò)的）例如：

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

平?？梢灾苯?lt;ul><list-test></list-test></ul>使用
因?yàn)椴恢趺从胿ue.js添加我嘗試試了下

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

檢查發(fā)現(xiàn)html中確實(shí)有<list-test>標(biāo)簽但是沒(méi)被渲染

回答

編輯回答

鹿惑

你可以使用v-for指令來(lái)渲染，然后在data里面定義一個(gè)數(shù)組放你的組件，數(shù)組元素屬性中定義一個(gè)顯示的屬性為false，這樣ul就會(huì)渲染出來(lái)li但是不顯示,接著通過(guò)改變顯示屬性值為true,使用v-show或者v-if來(lái)讓他顯示出來(lái)就好了。

<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 }
    ]
  }
})```

2017年8月31日 01:24

編輯回答