Vue学习记录-v-model

2020年5月12日

<div id="app">
    <!-- <input type="text" v-model="message"> -->
    <input type="text" :value="message" @input="valueChange">
    <!-- v-model双向绑定实现 -->
    <input type="text" :value="message" @input="message = $event.target.value">
    <h2>{{message}}</h2>

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

radio:

<div id="app">
    <label for="male">
      <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
      <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    <h2>您选择的是{{sex}}</h2>
  </div>
  <script src="../js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello',
          sex: '男'
        }
     })
  </script>

checkbox:

<div id="app">
    <label for="license">
      <input type="checkbox" id="license" v-model="isli">同意协议
    </label>
    <button :disabled="!isli">下一步</button>
    <div></div>
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <h2>您的爱好是{{hobbies}}</h2>
  </div>
  <script src="../js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello',
          isli: false,
          hobbies: []
        }
     })
  </script>

select:

<div id="app">
  <select name="abc" id="" v-model="fruit">
    <option value="苹果" >苹果</option>
    <option value="香蕉" >香蕉</option>
    <option value="葡萄" >葡萄</option>
  </select>
  <div></div>
  <select name="abc" id="" v-model="fruits" multiple>
    <option value="苹果" >苹果</option>
    <option value="香蕉" >香蕉</option>
    <option value="葡萄" >葡萄</option>
  </select>
  
  </div>
  <script src="../js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello',
          fruit: "香蕉",
          fruits: []
        }
     })
  </script>

值绑定:

<div id="app">
    <label v-for="item in originHobbies" :for="item">
      <input type="checkbox" :value="item" id="item" v-model="hobbies">{{item}}
    </label>
    <h2>您的爱好:{{hobbies}}</h2>
  </div>
  <script src="../js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello',
          hobbies: [],
          originHobbies: ["篮球","足球","乒乓球","羽毛球","台球","高尔夫球"]
        }
     })
  </script>

修饰符：

<div id="app">
    <label v-for="item in originHobbies" :for="item">
      <input type="checkbox" :value="item" id="item" v-model="hobbies">{{item}}
    </label>
    <h2>您的爱好:{{hobbies}}</h2>
  </div>
  <script src="../js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello',
          hobbies: [],
          originHobbies: ["篮球","足球","乒乓球","羽毛球","台球","高尔夫球"]
        }
     })
  </script>