如何使用Vuejs的“Mustache”语法进行烧瓶模板化？ [重复]

Question

这个问题在这里已有答案：

• Is it possible to use AngularJS with the Jinja2 template engine? 2回答
• How to render by Vue instead of Jinja 5个答案

似乎有一些重叠。

例如，这段代码：

  <div id="entry">
    <textarea rows="20" v-model="input"></textarea>
    <div>
      {{ input | md }}
    </div>
  </div>
  <script src="https://unpkg.com/[email protected]/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>

似乎在这里工作正常：https://jsfiddle.net/5qvc815w/（除了在降价处呈现的html标签）

但我正在烧瓶中

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>