HTMLにJava　Scriptの変数を使用したい

前提

vueを用い，HTML，Java Script，cssのみで動的なグラフを作成したいです．

実現したいこと

HTMLのstyle="width: ○○%”の部分にjava scriptの変数を使いたいです．
dataが使いたい変数です．

該当のソースコード

html
1<div class="graph">
2    <span class="bar" style="width: ○○%;">{{ data }}％</span>
3</div>

css
1.graph {
2    position: relative; /* IE is dumb */
3    width: 300px;
4    border: 1px solid #207870;
5    padding: 2px;
6}
7.graph .bar {
8    display: block;
9    position: relative;
10    background: #409890;
11    text-align: center;
12    color: #f0ffff;
13    height: 2em;
14    line-height: 2em;
15}
16.graph .bar span { position: absolute; left: 1em; }

javahack

2023/01/09 05:59

物凄く細かいことで申し訳ありませんが、「JavaScript」で一語です。空白は入りません。

ss615

2023/01/09 06:06

すみません．気を付けます・・

行動規範の内容に同意します

回答1件

HTMLのstyle="width: ○○%”の部分にjava scriptの変数を使いたいです．

変数を使ってstyleを設定したいのであれば、Vue.jsの変数・データにバインドすれば良いと思うのですが、どうでしょうか？（提示されている例から少し改変していますが、例えば以下のような形で）。

なお、実現方法は色々あると思いますので、あくまで一例の提示を意図しています。その他の実現方法などについては、vue.jsのドキュメントを参照下さい）。

vueを用い，HTML，Java Script，cssのみで動的なグラフを作成したいです．

こちらについては、別途グラフ表示のライブラリなどを利用されるのであれば、そのドキュメントを参照いただくのが良いのではないかと思います。

html
1<html>
2  <head>
3    <meta charset="UTF-8" />
4    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.11/dist/vue.js"></script>
5    <title>Vue.js Sample</title>
6  </head>
7  <body>
8    <div id="app">
9      <div class="graph">
10        <span class="bar" :style="{width: width}">Bar</span>
11      </div>
12    </div>
13  </body>
14  <script>
15    new Vue({
16      el: '#app',
17      data() {
18        return {
19          width: '200px'
20        }
21      }
22    });
23  </script>
24  <style>
25    .graph .bar {
26      display: inline-block;
27      position: relative;
28      background: #409890;
29      text-align: center;
30      color: #f0ffff;
31      height: 2em;
32      line-height: 2em;
33    }
34  </style>
35</html>