

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

[code]

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

と、jsに

[code]

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

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


CC BY-SA 3.0
2018-03-10T02:16:52.380
42282
2018-03-10T02:37:56.343
27687
question
html vue.js
isValid ? と"!isValid"　の意味がわからない


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


CC BY-SA 3.0
2018-03-10T02:37:56.343
42283
2018-03-10T02:37:56.343
8078
42282
answer