如何使用Vuejs的「鬍子」語法使用瓶子模板？

Question

看起來有一些重疊。

例如，下面的代碼：

<div id="entry"> 
    <textarea rows="20" v-model="input"></textarea> 
    <div> 
     {{ input | md }} 
    </div> 
    </div> 
    <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script> 
<script> 
var vm = new Vue({ 
    el: '#entry', 
    data: { 
    input: '' 
    }, 
    filters: { 
    md: function(val){ 
     return marked(val) 
    } 
    } 
}) 
</script> 

似乎好了在這裏工作：（從降價中呈現的HTML標籤除外）

但在燒瓶我得到https://jsfiddle.net/5qvc815w/

jinja2.exceptions.TemplateAssertionError 
TemplateAssertionError: no filter named 'md' 

它似乎在尋找jinja2來發現花括號中的什麼，而不是它應該做的vue.js。

Answer 1

當Vue的插值默認分隔符與另一個框架衝突時，您可以使用customize them。

var vm = new Vue({ 
    delimiters:['${', '}'], 
    el: '#entry', 
    data: { 
    input: '' 
    }, 
    filters: { 
    md: function(val){ 
     return marked(val) 
    } 
    } 
}) 

使用像這樣：

<div> 
    ${ input | md } 
</div>