在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 關(guān)于vue組件的問題

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

我自己注冊(cè)了一個(gè)組件 想通過點(diǎn)擊按鈕 將這個(gè)組件添加到ul當(dāng)中，并能被成功渲染，想請(qǐng)問下該怎么做（還是我的思路是錯(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)簽 但是沒被渲染

回答
編輯回答
鹿惑

你可以使用v-for指令來渲染，然后在data里面定義一個(gè)數(shù)組放你的組件，數(shù)組元素屬性中定義一個(gè)顯示的屬性為false，這樣ul就會(huì)渲染出來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 }
    ]
  }
})```
2017年8月31日 01:24
編輯回答
不討喜

你這個(gè)……還是停留在jQuery的使用方式，自己注冊(cè)的組件都沒經(jīng)過Vue的生命周期渲染，直接appendChild進(jìn)去的只是web標(biāo)準(zhǔn)的自定義標(biāo)簽而已，建議先熟看Vue官方文檔~

2018年8月11日 12:20
編輯回答
瘋浪

我的思路是通過改變變量的值來控制組件的顯示和隱藏.

通過按鈕來改變變量isShow的值
<ul><list-test v-if="isShow"></list-test></ul>

v-if vs v-show

2017年12月2日 13:51