vue.js,主el之外的v-model

vue.js, v-model outside main el

本文关键字:v-model el js vue      更新时间:2023-09-26

有什么方法可以绑定主el外部的v-model输入吗?我将使用vue网站上的一个例子:

new Vue({
   el: '#demo',
   data: {
      message: 'Hello Vue.js!'
   }
})

<div id="demo">
   <p>{{message}}</p>
   <input v-model="message">
</div>
<input v-model="message"> // <- how to bind this

如果你不介意破解的解决方案,几乎任何事情都可以完成!

使用jQuery实现这一点的一种方法是在Vue对象的范围内启动"消息"输入,然后在加载对象后移动它。

new Vue({
   el: '#demo',
   data: {
      message: 'Hello Vue.js!'
   },
   ready: function(){
      $(this.$els.msg).appendTo('#new-location');
   }
})

<div id="demo">
   <p>{{message}}</p>
   <input v-model="message" v-el:msg />
</div>
<div id="new-location">
<!-- target location -->
</div>