<template id="task-template">
<h1>My Tasks</h1>
<tasks-app></tasks-app>
<ul class="list-group">
<li class="list-group-item" v-for="task in list">
{{task.body|e}}
</li>
</ul>
</template>
上面是我的html。我想用Vue呈现代码。
<script>
Vue.component('tasks-app', {
template: '#tasks-template',
data: function() {
return {
list: []
}
}
created: function() {
$.getJson('/api/tasks', function(data) {
this.list = data;
})
}
})
new Vue({
el: 'body',
});
</script>
上面是我的Vue代码,Jinja提出了一个异常,即“task”是未定义的,我希望是Vue而不是Jinja呈现的html代码,我知道这可以在Laravel中完成:
"@{{task.body}}"
既然我是新来的,有人能帮我吗?
如果使用的是烧瓶,则可以重新定义Jinja使用的分隔符:
另一个选项是重新定义Vue.js使用的分隔符。如果您有很多现有的模板代码,并且希望开始将Vue.js功能添加到Flask或Django项目中,那么这非常方便。
然后在HTML中,可以混合使用Jinja和Vue.js模板标记:
不确定何时添加了"delimiters"属性,但它在版本2.0中。
您需要将模板的某些部分定义为raw,以便Jinja避开该部分,而不是试图用自己的上下文填充它。
下面是你需要做的:
参考号:http://jinja.pocoo.org/docs/dev/templates/#escaping
相关问题 更多 >
编程相关推荐