2020-11-21 Vue09-v-model

coderLcy發表於2020-12-20

 

45

<body>

  <div id="app">
    <input type="text" v-model="firstName">
    <br>
    {{firstName}}
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe'
      }
    })
  </script>
</body>
<body>

  <div id="app">
    <input type="text" :value="firstName" @input="valueChange">
    <br>
    {{firstName}}
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe'
      },
      methods: {
        valueChange(event){
          this.firstName = event.target.value;
        }
      }
    })
  </script>
</body>

可以實現與上面相同的功能

    <input type="text" :value="firstName" @input="firstName=$event.target.value">

不用methods,直接在@input後面寫.

 

 

46-v-model-radio

<body>

  <div id="app">
    <label for="male">
      <input type="radio" id="male" name="name" value="男" v-model="sex">男
    </label>
    <!-- label保證在點選文字時候和點選radio時候效果一樣 -->
    <label for="female">
      <input type="radio" id="female" name="name" value="女" v-model="sex">女
    </label>
    <!-- name的value相同才是單選框 -->
    <br>
    <br>
    {{sex}}
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        sex: '男'
      }
    })
  </script>
</body>

 

 

47-v-model-checkbox

單選

  <div id="app">
    <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同一協議
    </label>
    <br>
    您的選擇是:{{isAgree}}
    <br>
    <button :disabled="!isAgree">下一步</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        isAgree: false
      }
    })
  </script>

多選:

  <div id="app">
    <input type="checkbox" value="籃球" v-model='hobbies'>籃球
    <br>
    <input type="checkbox" value="足球" v-model='hobbies'>足球
    <br>
    <input type="checkbox" value="排球" v-model='hobbies'>排球
    <br>
    您的愛好是{{hobbies}}
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        isAgree: false,
        hobbies: []
      }
    })
  </script>

 

 

48-v-model-select

 

  <div id="app">
    <select name="abc" id="" v-model="fruit">
      <option value="蘋果" >蘋果</option>
      <option value="葡萄" >葡萄</option>
      <option value="香蕉" >香蕉</option>
      <option value="榴蓮" >榴蓮</option>
    </select>
    <br>
    {{fruit}}
    <br>
    <br>
    <select name="abc" id="" v-model="fruits" multiple>
      <option value="蘋果" >蘋果</option>
      <option value="葡萄" >葡萄</option>
      <option value="香蕉" >香蕉</option>
      <option value="榴蓮" >榴蓮</option>
    </select>
    {{fruits}}
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        fruit: '香蕉',
        fruits: ['香蕉']
      }
    })
  </script>

 

49

  <div id="app">
    <label v-for="item in originHobbies" :for="item">
      <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>
    <br>
    <br>
    {{hobbies}}
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        originHobbies: ['檯球','高爾夫球','羽毛球','乒乓球','足球','籃球'],
        hobbies: []
      }
    })
  </script>

 

50

lazy

  <div id="app">
    <input type="text" v-model.lazy="firstName">
    <br>
    <br>
    {{firstName}}
  </div>

number

  <div id="app">
    <input type="number" v-model.number="age">
    <br>
    <br>
    {{age}}
  </div>

trim

  <div id="app">
    <input type="text" v-model.trim="firstName">
  </div>