Vue传递参数

  • Vue是非常好用的前端框架,配置了便捷的前端互动功能,这里将介绍一下Vue最基本的参数传递方法。
    和其他语言一样,Vue函数支持从HTML传递参数到Vue函数,并把参数传递到后台进行处理。
    本文将按照一个通过输入筛选字段的实例来介绍参数传递方法。

HTML设置

导入Vue.js

<script type="text/javascript" src="/static/js/vue.js"></script>
<script type="text/javascript" src="/static/js/vue-router.js"></script>
  • 定义一个输入框,用来输入筛选字段,并设定传递两个参数“p1”和“p2”。
    这样可以同时检验两种传递参数的方法,其中是输入框用来检验V-model动态参数传递的方法,“p1”和“p2”是静态参数。
<div id="filters_require">
     <input
         v-model="search_Project" 
         placeholder="请输入“模块号”筛选" 
         style="width: 20%"
         @keyup.enter="filter_with_requires('p1','p2')"
         >
     </input>
<button v-on:click="filter_with_requires('p1','p2')">筛选</button>
</div>

在这里插入图片描述

Vue函数

  • 创建Vue函数,并接受三个参数,V-Model 和两个静态参数;
  • Vue函数,将三个参数传递给后台程序进行下一步处理。
new Vue({
      el: '#filters_require',
      data:{
          search_Project:  '',
          db_table: '',
          column_filter: '',
      },
      methods:{
          filter_with_requires: function(P1,P2){   
              data_to_send = {
                  search_Project: this.search_Project,
                  db_table: P1,
                  column_filter: P2,
              };
              data_to_send = JSON.stringify(data_to_send);  //数据转换成JSON
              $.post('/filter_with_requires/',
                        data_to_send,   //传递给后台的JSON数据
                        function(r,err){
                        if(err === 'success'){
                             alert(r);
                            }else{
                            alert(err);
                            return console.log(err);
                        }
                    
                        });
          }
      }
     })   

后台处理(Django)

  • 后台采用python进行处理,首先接受三个参数:
search_project = a['search_Project']
db_table = a['db_table']
filter_col = a['column_filter']
  • 接受参数的下一步处理,可以自由发挥了。
Logo

前往低代码交流专区

更多推荐