Vue.js代码,django项目中运行失败。【已知晓原因】

问题描述

问 题

<div id="bbq">
        <template v-for="item in todolist">
            <li>{{ item.title }}</li>
        </template>
</div>
    <script>
    var vmll = new Vue({
            el: '#bbq',
            data: {
                test: 'Test',
                todolist: [
                    {title: 'abc'},
                    {title: 'efg'}
                ]
            },
            methods: {
                cli: function (event) {
                    alert('bbc');
                }
            }
        });
     </script>

页面上显示出来的数据是空的， 不知道是什么原因啊，在单独的文件中是正常显示数据的，但是在我项目中却显示不出来，也不报错。

PS：
原因是django的模板系统会默认接管{{ }}中间的变量， 特么跟Vue.js就冲突了。
把需要用到{{ }}的地方用模板标记{% verbatim %} {{ message }} {% endverbatim %}包裹起来就好了.

解决方案

妈蛋， 找到原因了， 是因为django的模板系统会默认把{{}}中间的内容解析为模板变量， 我忘记了。

这篇关于Vue.js代码,django项目中运行失败。【已知晓原因】的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！