如何使用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>