如何在vue.js中添加v-model动态创建的html

How to add v-model dynamically created html in vue.js?

本文关键字：动态 v-model 创建 html 添加 vue js      更新时间：2024-03-20

我使用vue.js。我想在选择器中添加vue模型，它是使用jquery插件创建的。我的代码：

<div class="app">
   <div class="wysiwyg-wrap"></div>
</div>
<script>
    new Vue({
        el: '.app',
        data: {
            wysiwygText: 'text demo'
        },
        created: function(){
            $('.wysiwyg-wrap').trumbowyg();
        } 
    });
</script>

Jquery插件trumbowyg在'.wysiwyg-wrap'中创建了许多html元素。如何添加其中一个元素v-model绑定？我想输入我的密文，并将结果保存在vue模型的"wysiwygText"中。谢谢你的回答！

这是自定义指令的一个很好的用例。下面是一个向Vue添加jQuery功能的自定义指令示例：https://vuejs.org/examples/select2.html

您可以创建一个简单的指令

Vue.directive('wysiwyg-wrap', function () {
   $(this.el).trumbowyg();
});

然后将其连接到任何元素

<div class="app">
   <div v-wysiwyg-wrap></div>
</div>
相关文章：