「Vue.js」v-showディレクティブで条件的に要素を表示するサンプル

構文
<div v-show="条件式" ></div>
使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div id="arkgame">
<div v-show="cftA" style="background:yellow"></div>
<div v-show="cftB" style="background:black"></div>
</div>
<script src="vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#arkgame',
data: {
cftA: 1,
cftB: 0
}
});
vm.cftB = 1;
</script>
<div id="arkgame"> <div v-show="cftA" style="background:yellow"></div> <div v-show="cftB" style="background:black"></div> </div> <script src="vue/2.2.2/vue.min.js"></script> <script> var vm = new Vue({ el: '#arkgame', data: { cftA: 1, cftB: 0 } }); vm.cftB = 1; </script>
<div id="arkgame">
  <div v-show="cftA" style="background:yellow"></div>
  <div v-show="cftB" style="background:black"></div>
</div>
<script src="vue/2.2.2/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: '#arkgame',
    data: {
      cftA: 1,
      cftB: 0
    }
  });
  vm.cftB = 1;  
</script>

 

Vue.js

Posted by arkgame