<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 引发了“任务”未定义的异常,我希望的是 Vue 而不是 Jinja 渲染的 html 代码,我知道可以在 Laravel 中通过以下方式完成:
"@{{task.body}}"
由于我是 Jinja 的新手,有人可以帮助我吗?
另一个选项是重新定义 Vue.js 使用的分隔符。如果您有大量现有模板代码并且希望开始向 Flask 或 Django 项目添加 Vue.js 功能,这会很方便。
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
delimiters: ['[[',']]']
})
然后在 HTML 中,您可以混合 Jinja 和 Vue.js 模板标签:
<div id="app">
{{normaltemplatetag}}
[[ message ]]
</div>
不确定什么时候“分隔符” https://v2.vuejs.org/v2/api/#delimiters属性已添加,但它是在2.0版本中。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)