將Vue'mustache'括號嵌入HTML元素

我正在學習Vue JS並且至今爲止都很喜歡它。我有一個問題很難找到任何想法。是否可以動態「注入」鬍鬚括號（無法找到這些實際名稱，即{{fooBar}}）到HTML元素中？具體示例...將Vue'mustache'括號嵌入HTML元素

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

我想將{{tweet}}注入到textarea元素中。這是因爲在我的現實世界中，我無法訪問和修改textarea HTML本身。我試過使用jQuery .val（）來注入{{tweet}}，它只是作爲純文本。 This CodePen將有助於解釋這種情況。

如果這樣做根本無法完成，是否有任何替代方案可以用來動態綁定不可訪問的textarea？

來源

2017-08-09 Andyjm

當使用模板框架，如Vue.js你永遠不應該直接操作DOM –

對不起，請假設我無法訪問textarea html代碼（因此無法添加v模型） – Andyjm

textarea總是存在但我無法訪問原始代碼以添加Vue綁定。我可以用jQuery在1行代碼中實現這一點，但似乎Vue無法操縱DOM - 巨大的恥辱！ – Andyjm

從Vue.js documentation：

插在文字區域（{{文本}}）將無法正常工作。改用v-model。

所以使用jQuery，你可以簡單地嘗試將v-model屬性添加到您的textarea ...

$(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>

來源

2017-08-09 15:25:40 Badacadabra

這是理想的，不是太多jQuery和Vue仍然在做大部分工作 - 謝謝！ – Andyjm

將Vue'mustache'括號嵌入HTML元素

回答

相關問題