Vueにおける条件づけとループjs

8349 ワード
vue beginners javascript tutorial テキストリンク
以前の投稿では、WebアプリケーションでVueを使用する基本を網羅しています.このチュートリアルでは、Vue、Conditionals、ループの最も重要な特徴や基本的な構造の2つをカバーします.それは私たちが今後のブログでより高度なトピックに向かって行くように言及する価値がある我々はより複雑な問題を解決するために以前のチュートリアルで学んだものを使用します.今のところは、短くて簡単にしましょう.
次のようにindex.htmlというファイルを作成し、VEEをheadタグにインポートしてみましょう.
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
...
今、ランダムな値に基づいて条件付きでタグをレンダリングします.このようなタグがあるとしましょう.
<div>I'm displayed randomly</div>
そのためには、index.jsという名前のファイルを作成し、Vueのインスタンスを作成しましょう.
var app = new Vue({
  el: '#app'
})
このインスタンスをID appの要素に付けたいので、動的にレンダリングされたコードをdivに包み、ID appを与えましょう
<div id="app">
  <div>I'm displayed randomly</div>
</div>
ここで、Booleanプロパティをインスタンスに追加し、その値をランダムまたはtrueに設定します.
var app = new Vue({
  el: '#app',
  data: {
    random: Math.random() > 0.5,
  }
})
directiveという名前のv-ifを使用して、randomが真の場合のみdivをレンダリングします.
<div id="app">
  <div v-if="random">I'm displayed randomly</div>
</div>

The directive v-if is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value.


Mathorandom ()は0と1の間の数を生成しますので、ページを更新する時間のほぼ半分を期待します.
次に、v-for指令で色のリストを書きましょう.Vueインスタンスに最初にそのような名前を含む配列を追加します.
var app = new Vue({
  el: '#app',
  data: {
    random: Math.random() > 0.5,
    colours: ["red", "blue", "black", "green"]
  }
})
リストをレンダリングするにはv-forを使います.
<ol>
  <li v-for="colour in colours">
    {{colour}}
  </li>
</ol>

We can use the v-for directive to render a list of items based on an array. The v-fordirective requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on.


最後に、私たちのindex.htmlファイルのように見えます.
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="random">I'm displayed randomly</div>
      <ol>
        <li v-for="colour in colours">{{colour}}</li>
      </ol>
    </div>
    <script src="./index.js"></script>
  </body>
</html>
コードの準備ができましたので、utopiopsに配備しましょう.
私達が自由な静的なウェブサイト展開を使用して、utopiopsが提供することをホストしたいので、Fully managed applicationsのセクションの上に向かう.

次に、作成するアプリケーションタイプとしてStatic websiteを選択します.( UtopiopsはFunctionやDockerizedアプリケーションの無料プランを提供しています)

我々が知っている必要がある唯一のことは、我々が我々のコードを格納するrepositoryを指定することです(utopiopsはgithub、bitbucketとgitlabをサポートします).
任意のビルドコマンドを提供する必要はありません覚えておいてください!

そして、それは、数秒後に我々のウェブサイトを準備し、我々のコードを変更するたびに私たちの変更を自動的に展開します.
https://vuejs-conditional-loops-bd885053.sites.utopiops.com
注:utopiopsはパブリックポストでは、このポストを書くときには、ビューに表示されるビューは、Utopiopsにhttps://www.utopiops.comでログインするときに異なるかもしれないが、良いニュースは、それは確かにより多くのユーザーフレンドリーになり、使いやすくなっていることです.
ソースコードhereを見つけることができます.
OpenCV Android開発実戦--学習ノート--Mat画素操作【第3章】
Regexを使用してマルチカフカのトピックGrafanaダッシュボードに一致する