在Vue中,页面绑定数据默认使用 {{ data }}实现数据绑定
如:
<div id="app1">
<p>{{message}}</p>
</div>
var app1 = new Vue({
el: '#app1',
data() {
return {
message: 'asd',
}
},
});
但是在Django中,{{}}有自己的用处,用来表示后端返回到前端的数据,
如:
html文件:
{% for user in data %}
<tr>
<td>{{user.username}}</td>
<td>{{user.password}}</td>
<td>{{user.is_admin}}</td>
</tr>
{% endfor %}
后端:
return render(request, 'Person_manage/index.html', {'data': data})
这里也使用了{{}}插值格式,所以在两者一起使用的时候,需要将Vue的默认格式修改一下,代码如下:
var app1 = new Vue({
el: '#app1',
data() {
return {
message: 'asd',
}
},
delimiters: ['{[', ']}'],
});
html文件:
<div id="app1">
<p>{[message]}</p>
</div>
这样就可以使用{[data]}来绑定Vue的数据了。