v-model 创建双向绑定

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

1. 普通文本框

---

1. <div id="app">
2. <p>{{ msg }}</p>
3. <input type="text" v-model="msg">
4. </div>
6. <script>
7. let vm = new Vue({
8. el: '#app',
9. data: {
10. msg: 123,
11. },
12. })
13. </script>

2. 单选框

---

1. <div id="app">
2. <p>{{ sex }}</p>
3. 男 <input type="radio" value="男" v-model="sex">
4. 女 <input type="radio" value="女" v-model="sex">
5. </div>
7. <script>
8. let vm = new Vue({
9. el: '#app',
10. data: {
11. sex: 1,
12. },
13. })
14. </script>

3. 复选框

---

1. <div id="app">
2. <p>{{ language }}</p>
3. PHP <input type="checkbox" value="PHP" v-model="language">
4. Java <input type="checkbox" value="Java" v-model="language">
5. Python <input type="checkbox" value="Python" v-model="language">
6. </div>
8. <script>
9. let vm = new Vue({
10. el: '#app',
11. data: {
12. language: ['PHP']
13. },
14. })
15. </script>

4. 多行文本框

---

1. <div id="app">
2. <p>{{ content }}</p>
4. <textarea v-model="content"></textarea>
5. </div>
7. <script>
8. let vm = new Vue({
9. el: '#app',
10. data: {
11. content: 123
12. },
13. })
14. </script>

5. 下拉选择框

---

1. <div id="app">
2. <p>{{ city }}</p>
4. <select v-model="city">
5. <option disabled value="">请选择</option>
6. <option value="1">郑州</option>
7. <option value="2">开封</option>
8. <option value="3">南阳</option>
9. </select>
10. </div>
12. <script>
13. let vm = new Vue({
14. el: '#app',
15. data: {
16. city: 2
17. },
18. })
19. </script>

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

---

1. <div id="app">
2. <p>{{ content.length }}</p>
4. <input type="text" v-model.trim="content">
5. </div>
7. <script>
8. let vm = new Vue({
9. el: '#app',
10. data: {
11. content: ''
12. },
13. })
14. </script>

 

站长百科网