vue.jsでv-ifを使ってみる

2021年1月3日

vue.jsでv-ifを使ってみる

ここでは簡単な条件分岐を作って見ます。
501円～999円 →「セール実施中！」と表示
500円以下 →「処分セール実施中！」と表示
それ以外 → 表示なし

プログラム

【HTML】

<div id="app">
  {{ price }}円
  <span v-if="price <= 999 && price >= 501">セール実施中！</span>
  <span v-else-if="price <= 500">処分セール実施中！</span>
  <span v-else>通常価格</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">="style.css">

【JS】

var app = new Vue({
  el: '#app',
  data: {
    price: 400
  }
})

【結果】
無事「400円 処分セール実施中！」と表示されました。