回答此问题可获得 20 贡献值,回答如果被采纳可获得 50 分。
<p>我正在开发一个带有烧瓶服务器的可视化应用程序vue.js版对于前端。</p>
<p>在这个问题上类似的问题寻找一种方法vue.js版与flask变量语法不冲突,如所示<a href="https://github.com/yymm/flask-vuejs" rel="nofollow noreferrer">here</a>。</p>
<p>在我的情况下,我想知道是否有直接分配vue.js版variable data.d带有一个变量send from Flask render_template方法。</p>
<pre><code> var app = new Vue({
el: '#app',
data: {
'd': {{Flask-variable}}
},
})
</code></pre>
<p>这是密码</p>
<p>烧瓶</p>
^{pr2}$
<p>js公司</p>
<pre><code>var app = new Vue({
el: '#app',
data: {
'd':{{ d.data|tojson|safe}},
},
created:function(){
this.drawHistogram(d),
},
methods:{
// Called when the Visualization API is loaded.
drawHistogram: function(){
var data = null;
var graph = null;
var self = this;
// Create and populate a data table.
console.log(d);
data = self.d;
//data = [{x:1, y:0, z: 1},{x:1, y:0, z: 2},{x:2, y:0, z: 3},{x:3, y:0, z: 2},{x:4, y:0, z: 1},{x:5, y:0, z: 1},{x:6, y:0, z: 2},{x:7, y:0, z: 3},{x:8, y:0, z: 2},{x:9, y:0, z: 1},{x:10, y:0, z: 1},{x:11, y:0, z: 2},{x:12, y:0, z: 3},{x:13, y:0, z: 2},{x:14, y:0, z: 1},{x:15, y:0, z: 1},{x:16, y:0, z: 2},{x:17, y:0, z: 3},{x:18, y:0, z: 2},{x:19, y:0, z: 1}];
// create some nice looking data with sin/cos
/*
function custom(x, y) {
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
var steps = 4; // number of datapoints will be steps*steps
var axisMax = 15;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
data.push({x:x, y:0, z: z});
}
console.log(data);
}
*/
// specify options
var options = {
width: '300px',
height: '300px',
style: 'bar',
xBarWidth: 0.5,
yBarWidth: 0.5,
showPerspective: true,
showGrid: true,
showShadow: false,
"showYAxis":false,
"xLabel":'',
"zLabel":'',
cameraPosition: {
horizontal: 0*3.14,
vertical: 0*3.14,
distance: 1.8
},
legendLabel: '',
keepAspectRatio: true,
verticalRatio: 0.5,
"backgroundColor":'black',
"showLegend": true,
"xCenter":'50%',
};
var camera = graph ? graph.getCameraPosition() : null;
// create our graph
var container = document.getElementById('histogram');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
}
}
})
</code></pre>
<p>html格式</p>
<pre><code><!doctype html>
<html>
<head>
<!--Vuejs-->
<script type="text/javascript" src="{{url_for ('static',filename='js/vue.js')}}"></script>
<!--css-->
<link href="{{url_for ('static',filename='css/disp.css')}}" rel="stylesheet" type="text/css"/>
<!--Vis visualisation lib-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
<!--<script type="text/javascript" src="/front/lala_web/vis.js"></script>-->
</head>
<body>
<div id="app">
<h2>Histogram:</h2>
<div id="histogram"></div>
</div>
</body >
<!--display.js-->
<script type="text/javascript" src="{{url_for ('static',filename='js/histogram.js')}}"></script>
</html>
</code></pre>