http://www.axios-js.com/zh-cn/docs/
axios官网

方法1

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <div id="app">
        <select >
            <option v-for="item in selects" :value="item">[[item]]</option>
        </select>
        <h2>{{item}}</h2>
        <div v-for="udata in userData">
            [[ udata.name ]]
            </div>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            delimiters: ["[[", "]]"],
            data:{
                selects:['enu','cha'],
                userData:[]
            },
            created: function() {
                var self = this
                axios.get('/api/tasks')
                .then(function (response) {
                    self.userData = (response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
            // $.getJSON('/api/tasks', function(data) {
            //     console.log(data);
            //     self.userData = data;
            //     console.log(self.userData);
                
            // })
        }
        })
        </script>
</body>

</html>

WanmaitFlask这种方式是直接disable掉jinjia2的

from flask import Flask
from flask import render_template
from flask import jsonify

class WanmaitFlask(Flask):
    jinja_options = Flask.jinja_options.copy()
    jinja_options.update(dict(variable_start_string='%%',
                              # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'
                              variable_end_string='%%',))
app=WanmaitFlask(__name__)


@app.route("/test")
def test():
    return render_template("test.html",item=[123,345])

@app.route("/api/tasks")
def tasks():
    lists=[{"name":"123"},{"name":"123"},{"name":"123"},{"name":"123"}]
    return jsonify(lists)

if __name__ == '__main__':
    app.run("0.0.0.0",8888,debug=True)

https://www.jb51.net/zt/jquerydown.htm
这是js 路径

方法2 更改vue的数据绑定方式

from flask import Flask
from flask import render_template
from flask import jsonify

# class WanmaitFlask(Flask):
#     jinja_options = Flask.jinja_options.copy()
#     jinja_options.update(dict(variable_start_string='%%',
#                               # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'
#                               variable_end_string='%%',))
app=Flask(__name__)


@app.route("/test")
def test():
    return render_template("test.html",item=[123,345])




@app.route("/api/tasks")
def tasks():
    lists=[{"name":"123"},{"name":"123"},{"name":"123"},{"name":"123"}]
    return jsonify(lists)

if __name__ == '__main__':
    app.run("0.0.0.0",8888,debug=True)

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <div id="app">
        <select >
            <option v-for="item in selects" :value="item">[[item]]</option>
        </select>
        <h2>{{item}}</h2>
        <div v-for="udata in userData">
            [[ udata.name ]]
            </div>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            delimiters: ["[[", "]]"],
            data:{
                selects:['enu','cha'],
                userData:[]
            },
            created: function() {
                var self = this
                axios.get('/api/tasks')
                .then(function (response) {
                    self.userData = (response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
            // $.getJSON('/api/tasks', function(data) {
            //     console.log(data);
            //     self.userData = data;
            //     console.log(self.userData);
                
            // })
        }
        })
        </script>
</body>

</html>

**delimiters: ["[[", “]]”],**这句话是很重要的，就是把{{}}改成[[]]

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue