javascript - 将 Vue 'moustache' 括号注入(inject) HTML 元素

Question

我正在学习 Vue JS，到目前为止我很喜欢它。我有一个问题，我发现很难得到任何想法。是否可以动态地将 mustache 括号(无法找到这些 mustache 的实际名称，即 {{ fooBar }})“注入(inject)”到 HTML 元素中？具体例子...

  <!-- {{ tweet }} TO BE INJECTED BELOW -->
  <textarea cols="60" rows="4"></textarea>

我想将 {{ tweet }} 注入(inject)到文本区域元素中。这是因为在我的真实示例中，我无法访问和修改 textarea HTML 本身。我试过使用 jQuery .val() 来注入(inject) {{ tweet }}，它确实以纯文本形式注入(inject)。 This CodePen将有助于解释情况。

如果这根本无法完成，是否有任何替代方法可以动态绑定(bind)不可访问的文本区域？

Answer 1

来自Vue.js documentation :

Interpolation on textareas ({{text}}) won't work.Use v-model instead.

因此，使用 jQuery，您可以简单地尝试将 v-model 属性添加到您的文本区域...

$(function () {
  $('textarea').attr('v-model', 'text');
  var vm = new Vue({
    el: '#app',
    data: {
      text: 'Lorem ipsum...'
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app">
  <h1>{{ text }}</h1>
  <textarea></textarea>
</div>