Vue表单绑定: v-model

Vue表单绑定: v-model

双向绑定
v-model = v-bind + @input(事件)

1.v-model的基本基本使用

 <div id="app">
    <input type="text" v-model="msg">
      {{msg}}
  </div>
  <script>
    const vue = new Vue({
        el: '#app',
        data: {
            msg: 'Hello'
        }
    });
  </script>

2.v-model 和 radio结合使用

<div id="app">
  <input type="radio" v-model="sex" name="sex" value="男">男
  <input type="radio" v-model="sex" name="sex" value="女">女

  <span v-text="sex"/>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            sex: '女'
        }
    });
</script>

3.v-model结合checkbox

单选返回的是Boolean

<div id="app">
  <label for="agree">是否同意</label>
  <input id="agree" type="checkbox" v-model="flag">

  <button :disabled="!flag">下一步</button>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            flag: false
        }
    });
</script>

多选返回的是数组

<div id="app">
  <input type="checkbox" v-model="hobbies" value="篮球">篮球
  <input type="checkbox" v-model="hobbies" value="足球">足球
  <input type="checkbox" v-model="hobbies" value="乒乓球">乒乓球
  <input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球
  {{hobbies}}
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            hobbies: []
        }
    });
</script>

4.v-model 结合select 使用

4.1单选

  <div id="app">
    <select v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="雪莉">雪莉</option>
      <option value="西瓜">西瓜</option>
      <option value="地瓜">地瓜</option>
    </select>
    <h1>你选择了水果:{{fruit}}</h1>
  </div>
  <script>
    const vue = new Vue({
        el: '#app',
        data: {
            fruit: '西瓜'
        }
    });
  </script>

4.2多选

需要绑定数组

  <div id="app">
  <select name="a1" v-model="fruits" multiple="multiple">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="雪莉">雪莉</option>
    <option value="西瓜">西瓜</option>
    <option value="地瓜">地瓜</option>
  </select>
  <h1>你选择了水果:{{fruits}}</h1>
  </div>
  <script>
    const vue = new Vue({
        el: '#app',
        data: {
            fruits: [],
        }
    });
  </script>

5.值绑定

  <div id="app">
    <label v-for="item in originFruits" :for="item">
      <input :id="item" type="checkbox" :value="item" v-model="fruits">{{item}}
    </label>
  </div>
  <script>
    const vue = new Vue({
        el: '#app',
        data: {
            originFruits: ['西瓜', '香蕉', '苹果', '雪梨'],
            fruits: [],
        }
    });
  </script>

6.修饰符

6.1 lazy

就是不想用户输入的时候，实时绑定，会浪费资源。
添加lazy只会失去焦点或者敲回车键。

  <div id="app">
    <input type="text" v-model.lazy="message">
    <h1>您输入的是: {{message}}</h1>
  </div>
  <script>
    const vue = new Vue({
        el: '#app',
        data: {
            message: '',
        },
    })
  </script>

有焦点或者没有回车：

失去焦点或者回车：

6.2 number

希望用户输入的数字绑定后得到的是number类型

<div id="app">
  <input type="number" v-model.lazy="message">
  <h1>类型:{{typeof(message)}}</h1>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            message: '',
        },
    })
</script>

<div id="app">
  <input type="number" v-model.lazy.number="message">
  <h1>类型:{{typeof message}}</h1>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            message: '',
        },
    })
</script>

6.3 trim

清除前后的空格
没加trim：

<div id="app">
  <input type="text" v-model="message">
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            message: '',
        },
    })
</script>

加trim:

<div id="app">
  <input type="text" v-model.trim="message">
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            message: '',
        },
    })
</script>