v-model 创建双向绑定

在表单 <input>、<textarea> 及<select>元素控件或者组件上创建双向绑定，它负责监听用户的输入事件以更新数据

1. 普通文本框

<div id="app">
    <p>{{ msg }}</p>
    <input type="text" v-model="msg">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 123,
        },
    })
</script>

2. 单选框

<div id="app">
    <p>{{ sex }}</p>
    男 <input type="radio" value="男" v-model="sex">
    女 <input type="radio" value="女" v-model="sex">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            sex: 1,
        },
    })
</script>

3. 复选框

<div id="app">
    <p>{{ language }}</p>
    PHP <input type="checkbox" value="PHP" v-model="language">
    Java <input type="checkbox" value="Java" v-model="language">
    Python <input type="checkbox" value="Python" v-model="language">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            language: ['PHP']
        },
    })
</script>

4. 多行文本框

<div id="app">
    <p>{{ content }}</p>
    <textarea v-model="content"></textarea>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            content: 123
        },
    })
</script>

5. 下拉选择框

<div id="app">
    <p>{{ city }}</p>
    <select v-model="city">
        <option disabled value="">请选择</option>
        <option value="1">郑州</option>
        <option value="2">开封</option>
        <option value="3">南阳</option>
    </select>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            city: 2
        },
    })
</script>

6. 修饰符 trim 清除两边的空格

<div id="app">
    <p>{{ content.length }}</p>
    <input type="text" v-model.trim="content">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            content: ''
        },
    })
</script>