首页 > 其他分享 >django form data如何传递到template的vue

django form data如何传递到template的vue

时间:2023-06-09 16:36:22浏览次数:48  
标签:vue form script JavaScript value django world data hello

参考:

https://docs.djangoproject.com/en/4.2/ref/templates/builtins/#json-script

afely outputs a Python object as JSON, wrapped in a <script> tag, ready for use with JavaScript.

Argument: The optional HTML “id” of the <script> tag.

For example:

{{ value|json_script:"hello-data" }}

If value is the dictionary {'hello': 'world'}, the output will be:

<script id="hello-data" type="application/json">{"hello": "world"}</script>

The resulting data can be accessed in JavaScript like this:

const value = JSON.parse(document.getElementById('hello-data').textContent);

XSS attacks are mitigated by escaping the characters “<”, “>” and “&”. For example if value is {'hello': 'world</script>&amp;'}, the output is:

<script id="hello-data" type="application/json">{"hello": "world\\u003C/script\\u003E\\u0026amp;"}</script>

 

标签:vue,form,script,JavaScript,value,django,world,data,hello
From: https://www.cnblogs.com/lxgbky/p/17469556.html

相关文章

  • 初始vue3——第三天
    双向绑定基本用法在前端处理表单时,我们常常需要将表单输入框的内容同步给JavaScript中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦:<input:value="text"@input="event=>text=event.target.value">v-model指令帮我们简化了这一步骤:<inputv-model="text......
  • vue学习记录 2
    打开昨天的vue项目,没记错的话网上查到的信息说,代码编辑部分就只在src文件夹,包括asset,router和components,其他的全是配置文件。项目新建默认是一个巨大的vue图标和两行链接,布局在HelloWorld.vue,但是我昨天还没找到那个名为logo.png的图标是哪里插进去的。今天先摸清页面,然后做一......
  • Vue 调试访问本地后端接口配置
    记录一下本地测试前端的时候怎么访问本地后端接口。时间太长容易忘。。。。1、首先要知道前端在访问后端的时候是怎么加上后端接口地址的。如下图,找到封装http请求的文件,src/utils/rerquest.js该图中的baseURL就是访问时我们加上的后端请求地址。baseURL:process.env.VUE_APP......
  • #Vue-cli 5 怎么打印代理地址 #Vue-cli 5 怎么查看真是请求地址 ?
    proxy:{'/api':{target:'http://192.168.3.47:1228',changeOrigin:true,onProxyReq:function(proxyReq,req,res){console.log('[proxy]:'+proxyReq.getHeader('origin')+proxyReq.p......
  • nnFormer
    nnFormer不仅利用了交错卷积和自注意操作的结合,还引入了局部和全局基于体积的自注意机制来学习体积表示。此外,nnFormer还提出在类似U-Net的架构中,使用跳转注意(skip-attention)来取代跳转连接(skip-connection)中传统的连接/求和操作.有许多方法试图将变压器应用于医学图像分析领......
  • c# Winform 防止重复打开同一窗体
     方式一,foreach(FormfrminApplication.OpenForms){if(frmisform1){form1.Activate();form1.WindowState=FormWindowState.Normal;return;}}Form1form1=newForm1();form1.Show(); 方式二,Form1F1;if(......
  • elementui局部全屏无法显示tooltip,popover等基于vue-popper类开发的组件
    因为这些元素都是插入到body里面的,而当某一div全屏后由于层级原因无法显示这些组件,解决办法如下首先append-to-body设置为false然后手动将弹出内容添加到想要的位置即可......
  • Vue路由的基本使用
    1、相关理解1.1vue-router的理解vue的一个插件库,专门用来实现SPA应用的1.2对SPA应用的理解1、单页Web应用(singlepagewebapplication,SPA)2、整个页面只有一个完整的页面。index.html3、点击页面中的导航链接不会刷新页面,只做页面的局部更新4、数据需要通过ajax请求获取......
  • vue+elementUI 搜索栏公共组件封装,封装多搜索条件通用组件,超实用
    1、新建BaseSearch.vue文件<!--*名称:弹窗的搜索条件组件*功能:methods1.点击搜索的方法:@search2.搜索条件props:formItemList--><template><divclass="dialog-search"><el-form:inline="true"ref="......
  • Vue脚手架配置代理
    前言前端在向后端请求资源时通常会遇到跨域问题,当我们是用vue脚手架构建项目时,可以通过配置代理解决跨域问题参考文档:devServer.proxy方法一:在vue.config.js中添加如下配置:module.exports={devServer:{proxy:'http://localhost:4000'}}说明:(1)、优点:配置简......