1

http://gihyo.jp/dev/serial/01/vuejs/0002?page=2 を参考にしながらVue.jsを勉強しています。
htmlに

<div id="example" v-bind:style="{'border': (isValid ? '' : '1px solid red')}">
  <p>名前 {{ name }}</p>
  <p v-show="!isValid">
    名前を入力してください
  </p>
</div>

と、jsに

var vm = new Vue({
  el: '#example',
  data: {
    name: '',
  },
  computed: {
    isValid: function () {
      return this.name.length > 0;
    }
  }
});
window.vm = vm;

とありますが、このisValid ?  と"!isValid" の意味がわからないです。これらのコードを動かすと、赤い枠と名前を入力してくださいの文字がいつも表示されていますが、isValid ? と!isValidは合い判するものではと思っていまして、それなのにこの2つがいつも表示されているのが理解できませんでした。

1 件の回答 1

3

isValid ? '' : '1px solid red'は、isValidtrueならば''を、falseならば'1px solid red'を返します。
つまり、isValid == falseの場合に、赤枠が表示されます。
!isValidは、truefalseの反転ですから、isValid == falseの場合に、「名前を入力してください」が表示されます。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。