「Vue.js」v-ifディレクティブを使うサンプル

2020年11月26日

構文
<div v-if="条件式">xxxx</div>
説明
条件式「cft」の値がtrueの場合、DOM要素が生成、falseの場合破棄
使用例

<div id="ark">

<div v-if="cft">Abcde1232344</div>

</div>

<script src="vue/2.2.2/vue.min.js"></script>

<script>

var vm = new Vue({

el: '#ark',

data:{

cft: false

}

});

vm.cft = 1;

</script>

<div id="ark"> <div v-if="cft">Abcde1232344</div> </div> <script src="vue/2.2.2/vue.min.js"></script> <script> var vm = new Vue({ el: '#ark', data:{ cft: false } }); vm.cft = 1; </script>

<div id="ark">
  <div v-if="cft">Abcde1232344</div>
</div>
<script src="vue/2.2.2/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: '#ark',
    data:{
      cft: false
    }
  });
  vm.cft = 1;  
</script>

Posted by arkgame