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>

trim 清除两边的空格" class="reference-link" target="_blank">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>