How does VUE bind DOM elements created by JS/JQ to two-way data binding? For example, create a new input element and how to bind v-model

var input = $("<input style="width:100px; height:30px;" type="text" name="" autocomplete="off" class="layui - input" v-model="accountName">")
$("body").append(input);

for example, the DOM I created with JQ cannot be bound. What should I do?

Mar.03,2022

in fact, the DOM you see in template is not really DOM..

if you need to manually create a DOM-based element and manually insert it into the DOM tree, think of it as a component.

  1. create a vue component.
  2. inherits and creates an vue instance in vm.extend.
  3. compile
  4. by manual vm.$mount ()
  5. then append it into body.

you can refer to the official introduction to extend () and mount ()

https://cn.vuejs.org/v2/api/-sharp.


Don't use the idea of jquery to use vue.
if you don't know how to implement it in vue, you can state your requirements

Menu