在django中vue插入表达式,在网页中不显示
此代码仅供示例!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<a href="#" @click="clickchange(index)" v-for="(item,index) in chenge_info"
:class="[item.classes,{'default-bg':item.flag}]">{{item.htmltext}} </a>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
chenge_info: [{
classes: "center",
flag: false,
htmltext: "个人中心"
},
{
classes: "order",
flag: true,
htmltext: "我的订单"
},
{
classes: "record",
flag: false,
htmltext: "转换记录"
}
]
}
})
</script>
</body>
</html>
会发现并没有显示插入表达式中的文字
这是因为Django的模板系统会默认接管{undefined{ }}中间的变量, 跟Vue.js就冲突了。把需要用到{undefined{ }}的地方用模板标记:
{% verbatim %} 将插入表达式放置标记的标签内即可解决{% endverbatim %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
{% verbatim %}
<a href="#" @click="clickchange(index)" v-for="(item,index) in chenge_info"
:class="[item.classes,{'default-bg':item.flag}]">{{item.htmltext}} </a>
{% endverbatim %}
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
chenge_info: [{
classes: "center",
flag: false,
htmltext: "个人中心"
},
{
classes: "order",
flag: true,
htmltext: "我的订单"
},
{
classes: "record",
flag: false,
htmltext: "转换记录"
}
]
}
})
</script>
</body>
</html>
问题解决