Django中使用Vue语法冲突解决

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>

 

posted @ 2025-01-21 18:02  点点滴滴的努力  阅读(83)  评论(0)    收藏  举报