Как использовать переменную vue.js внутри переменной jinja2?
1 ответ
от
charles.orn ,
6 месяцев назад
@narciso
Vue.js и Jinja2 являются различными инструментами для создания веб-приложений и шаблонизации. Vue.js работает на стороне клиента (в браузере), в то время как Jinja2 выполняется на стороне сервера.
Поэтому, перед тем как использовать переменную Vue.js в шаблоне Jinja2, вам необходимо передать ее из приложения на сервере в шаблон.
Пример:
- Создайте переменную в скрипте Vue.js:
1 2 3 4 5 6 |
new Vue({
el: '#app',
data: {
myVariable: 'Hello from Vue.js'
}
})
|
- Отправьте эту переменную в шаблон Jinja2 при рендеринге страницы:
1 2 3 4 5 6 7 8 9 10 11 |
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
my_variable = 'Hello from Flask'
return render_template('index.html', my_variable=my_variable)
if __name__ == '__main__':
app.run()
|
- Используйте переменную в шаблоне Jinja2:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html>
<html>
<head>
<title>My App</title>
</head>
<body>
<h1>{{ my_variable }}</h1>
<div id="app">
<p>{{ myVariable }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
myVariable: '{{ my_variable }}'
}
})
</script>
</body>
</html>
|
Здесь my_variable - это переменная, переданная из Flask в шаблон Jinja2, а myVariable - это переменная, использованная в скрипте Vue.js. Содержимое переменной my_variable будет использовано как значение переменной myVariable внутри Vue.js.
15
Похожие обсуждения:
Как создать переменную и присвоить ей значение из другой переменной в twig?
Как использовать woocommerce api внутри файла function.php?
Как записать полученную черех ajax переменную в vue.js?
Как записать полученную черех ajax переменную в vue.js?
Можно ли использовать setTimeout внутри цикла или рекурсивной функции?
Как использовать asyncio внутри потока в приложении на pyqt5?