1、方案verbatim标签
1-1、django1.5以后,加入了verbatim标签
{% verbatim vueblock %}
...
{% endverbatim vueblock %}
注：vueblock 设置的标签别名，可以很好的分别标签使用
1-2、verbatim标签使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
{# <script src="/static/js/vue.js"></script>#}
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
使用verbatim标签将vue语法包裹使用
{% verbatim vueblock %}
<div id="app">
<p>{{ name }}</p>
</div>
{% endverbatim vueblock %}
</body>
<script>
new Vue({
el: "#app",
data: {
name: "django使用Vue语法解决冲突方法"
}
})
</script>
</html>
注：使用verbatim标签后里面使用django模板语法后端定义的变量传递参数会失效不能直接使用，需要在verbatim标签外面使用
2、方案2示例
说明：在vue里面添加delimiters: ['[[', ']]']
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
{# <script src="/static/js/vue.js"></script>#}
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
{# 使用[[vue变量或其它语法]] #}
<p>[[ name ]]</p>
<button @click="handleHide">隐藏</button>
<p v-if="hide">点击隐藏按钮后数据会消失</p>
</div>
</body>
<script>
new Vue({
el: "#app",
{#添加delimiters: ['[[', ']]']#}
delimiters: ['[[', ']]'],
data: {
name: "Vue语法中添加delimiters解决冲突方法",
hide: true
},
methods:{
{#点击隐藏按钮数据隐藏消失#}
handleHide(){
this.hide =! this.hide
}
}
})
</script>
</html>
标签：Vue,verbatim,标签,Django,语法,vueblock,使用 From： https://www.cnblogs.com/albert919/p/18684019