Questions about vue components

I have registered a component and want to add this component to ul by clicking the button, and it can be rendered successfully. I would like to ask what to do (or my idea is wrong) for example:

<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:"-sharptest",
     data:{},
     methods:{}   
     })
 

    </script>

usually you can directly

    < list-test > < / list-test >
use
because I don"t know how to add it with vue.js. I tried it

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

check and find that there is a < list-test > tag in html but it is not rendered

Mar.01,2021

you. Still stay in the use of jQuery. The registered components have not been rendered by Vue's life cycle, and those directly appendChild are just custom tags of web standard. It is recommended that take a good look at the official Vue documentation ~


my idea is to control the display and hiding of components by changing the value of variables.

change the value of the variable isShow through the button

    < list-test VMI if = "isShow" > < / list-test >

ide/conditional.html-sharpv-if-vs-v-show" rel=" nofollow noreferrer "> v-if vs v-show


you can use the v-for command to render, and then define an array to put your components in data, and define a displayed attribute as false, in the array element attribute so that ul will render li but not display it, and then use v-show or v-if to display it by changing the display property value to true,.

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