Django使用Vue在html中按{{}}取值失败的解决办法

因为django本身有模版的概念,直接取值是从django的模版中取值的

而在vue的v-for中想要获取遍历之后的数据,

直接用方式取值,会取到None

这时候就需要进行特殊处理,解决办法为:

1、禁用Django的模版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% verbatim %}
{% endverbatim %}
在需要不解析的DOM 上下 包裹 {% verbatim %} {% endverbatim %}
例如:
<div id="app" v-cloak v-loading.fullscreen.lock="loading">
{% verbatim %}
<div class="subject" v-for="subject in subjects">
<p class="sname">
<a :href="'/teachers?sno=' + subject.no">
{{ subject.name }}
</a>
<img v-if="subject.isHot" src=''>
</p>
<p>{{ subject.intro }}</p>
</div>{% endverbatim %}
</{% verbatim %}
{% endverbatim %}
在需要不解析的DOM 上下 包裹 {% verbatim %} {% endverbatim %}
例如:
<div id="app" v-cloak v-loading.fullscreen.lock="loading">
{% verbatim %}
<div class="subject" v-for="subject in subjects">
<p class="sname">
<a :href="'/teachers?sno=' + subject.no">
{{ subject.name }}
</a>
<img v-if="subject.isHot" src=''>
</p>
<p>{{ subject.intro }}</p>
</div>{% endverbatim %}
</div>

2.更改Vue的中括号

1
2
3
4
5
6
7
8
//改成其他 例如:"{[ ]}"等等,修改方式如下:
Vue.config.delimiters = ["{[", "]}"]
或者
new Vue({
delimiters:['{[', ']}'],
el: '.el',
//改成其他 例如:"{[ ]}"等等,修改方式如下:
Vue.config.delimiters = ["{[", "]}"]
或者
new Vue({
delimiters:['{[', ']}'],
el: '.el',
data:{}
})

Django使用Vue在html中按{{}}取值失败的解决办法
https://evanyangtobegreatest.github.io/2024/02/22/Django使用Vue在html中按-取值失败的解决办法/
作者
Evan
发布于
2024年2月22日
许可协议