effect ：

Code ：

search_form.html

{% extends 'PPDASH/base.html' %}
{% load static %}
{% block body_block %}
<!-- <script src="/static/vue/vue.js"></script> -->
<!-- <script>Vue.config.productionTip=false</script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div class="container">
<div class="row py-4 align-items-center" id="app">
<form action="/PPDASH/search_results/" method="get">
<label> Please enter the query criteria （ Department and job No. can be queried at most 5 term , With ; Division ）</label>
<div class="form-group" >
<label> Plant type </label>
<input type="text" name="plantid" v-model="message_plantid">
</div>
<div class="form-group">
<label> department </label>
<input type="text" name="dept" v-model="message_dept">
</div>
<div class="form-group">
<label> function </label>
<input type="text" name="function" v-model="message_function">
</div>
<div class="form-group">
<label> Job number </label>
<input type="text" name="eid" v-model="message_eid">
</div>
<div class="form-group">
<label> full name </label>
<input type="text" name="name" v-model="message_name">
</div>
<div class="demo">
Selected condition is
<span v-if="message_plantid"> Plant type :[[ message_plantid ]],</span>
<span v-if="message_dept"> department :[[ message_dept ]],</span>
<span v-if="message_function"> function :[[ message_function ]],</span>
<span v-if="message_eid"> Job number :[[ message_eid ]],</span>
<span v-if="message_name"> full name :[[ message_name ]]</span>
</div>
<input class="ml-5 btn-small btn-primary" type="submit" value=" Inquire about ">
</form>
</div>
</div>
<script type="text/javascript"> var app = new Vue({
 delimiters:['[[', ']]'], el: '#app', data() {
 return {
 message_plantid: '', message_dept: '', message_function: '', message_eid: '', message_name: '', } }, methods:{
 // add:function () {
 // this.arrlist.push() // } } }); </script>
{% endblock %}

Django Use in Vue.js Syntax conflict resolution

https://blog.csdn.net/ssjdoudou/article/details/104684184