django与vue 插入表达式冲突

最新推荐文章于 2022-06-23 19:28:47 发布

Performer_942

最新推荐文章于 2022-06-23 19:28:47 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/weixin_46274079/article/details/123085062

版权

在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>

问题解决
在这里插入图片描述

Performer_942

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
django与vue 插入表达式冲突

在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=
复制链接

扫一扫