Vue.jsで一覧の一部を赤くする方法

Vue.js、検索回数が多く、人気なようですが、実は使い勝手が悪く、React.jsと比べてプログラマはいちいち検索しないと使い方が分からないので検索回数が多くなると言う噂がTwitter上にありました。

それはともかく、易占に6爻あって、その中の1爻を強調表示したいと思いました。なかなかクリティカルな情報がなかったので記して置きます。

実現したのがこれ。

HTML側のコードはこんな感じ

    <P><canvas id="myCanvas1" width="60" height="60"></canvas></P>

    <div id="app2">
      <h1 align="center">本卦 {{ info.kemei }}の{{ koudat }}爻</h1>
      
      <p>[卦辞] {{ info.keji }}</p>
      <ol>
        <div v-for=" i in 6">
          <li v-if="i === koudat" style='color:#FF0000'>{{ info.kou[i-1] }}</li>
          <li v-else  style='color:#000000'>{{ info.kou[i-1] }}</li>
          
         </div>
      </ol>
    <p>[説明] {{ info.setumei }}</p>
    </div>

JavaScript側はこんな風

var app2 = new Vue ({
    el: '#app2',
    data: {
       
          info: null,
          koudat: null
        
      },
  
    mounted() {
        this.koudat = Number(kou) + 1;
        axios
        .get('https://mike2mike.xyz/datas_ke.json') //ここにURLを入れる
        .then(response => {this.info = response.data[ke];
            });
      }
  })

参考になりましたでしょうか?

では。

コメント

タイトルとURLをコピーしました