如何使用带有 Vuejs 的“Mustache”语法的烧瓶模板？ [复制]答案

【问题标题】：How do I use flask templating with Vuejs's “Mustache” syntax? [duplicate]如何使用带有 Vuejs 的“Mustache”语法的烧瓶模板？ [复制]
【发布时间】：2017-12-25 12:04:21
【问题描述】：

似乎有一些重叠。

例如，这段代码：

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

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

但在烧瓶中我得到了

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

它似乎在寻找 jinja2 来发现花括号中的内容，而不是它应该在 vue.js 中做的事情。

【问题讨论】：

标签： flask vue.js jinja2

【解决方案1】：

当 Vue 的默认插值分隔符与其他框架冲突时，您可以customize them。

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

这样使用：

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

【讨论】：