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

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

で、Reactをざっと調べてみたのですが、サッパリわからん。webや電子書籍では頭に入ってきません。紙の本を注文しました。FWって各個独自性が強くて、プログラム言語のように方言レベルの話じゃないです。

で、どっちがいいか調べたら、Vue.js派とReact派がどっちも居まして私はVue.js知っているのだからこれ以上学習コスト増やしても負担になって器用貧乏になるだけではないかと思い始めました。

私はReactのタグとスクリプトをごっちゃに書くというのが気に入りません。Vue.jsのように分けて書きたい。

一長一短がありので、様子をみることにします。今は拮抗しているようだし、また後で取得してもいい。

それはともかく、易占に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];
            });
      }
  })

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

では。

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

関連

コメント

共有:

関連

コメント