我要悄悄的学Vue，然后找一份工作先(4).

学习Vue的第四天， 这篇博客主要用来记录一下 v-model 基于form表单的一些操作.

文章记录了关于v-model表单的基本操作，包括基本使用， v-model的原理解析， 绑定radio, checkbox, select ， 动态生成值以及修饰器，最后自己写了一个记事本的小案例.

文章目录

• • • • 表单控件v-model的使用
      • 课后作业: 记事本的实现:

表单控件v-model的使用

v-model 最优秀的一个点， 是实现了和Vue实例中的data的双向绑定， 
不管是更新data里面的值， 还是更新 v-model管理的值，他们都会相适应的变化,
第一个使用这个方法的时候， 确实佩服尤大的设计思想， 很强!

## v-model 实际上就是一种将input/textarea里面的值(包括文本域， 布尔值)和Vue实例中的data数据
进行相对于的绑定更新的工具罢了.
所以在一些Input标签中， 我们需要给出value的默认值(比如radio, checkbox) ##

1. v-model 的基本使用:

 <div id="div">
  <input type="text" v-model="message">
  <h2>{{message}}</h2>
</div>
const vm = new Vue({
  el："#div",
  data(){
    return{
      message:"你好呀",
    }
  }
})

这样，当我们修改input里面的值的时候，因为绑定了v-model属性
所以this.message 会改变， 进而h2标签里值也会更改

!!! v-modle 可以使用在任何的input标签， 同时还是可以使用在 textarea 文本域里面

---

2. v-modle 的原理:

首先想一下， 值会什么会变化？  因为值是动态的， 那Vue怎么实现一个动态的值呢?
使用 v-bind:value  简写为 :value不就可以了， 在data里面创建一个当前message， 
用来记录每次输入的值, 这样就先实现了值的动态， 对于怎么更新这个message， 我们需要监听input中
的input事件， @input="this.message = $event.target.value"  
在input事件中， 里面的target中存在值value， 然后更新上去就完事了.

  <input type="text" :value="message"  @input="getV"> 
  getV(event){
    this.message = event.target.value;
  }

3. v-model绑定radio

前面说了， v-model 可以绑定任何input事件, 包括radio事件

<div id="vm">
<!-- 单选框 radio  v-model 还可以实现name的互斥效果 -->
<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>

const vm = new Vue({
  el:"#vm",
  data(){
    return{
      sex:"男",  // 默认数据为男
    }
  },
})

当我们更改选择的时候， sex也会从男变女， 从女变男.

4. v-model绑定checkbox

<!-- 单选框 checkbox -->
<label for="licence">
  <input type="checkbox" id="licence" v-model="isAgree">是否同意:  // 默认是false
</label>
<!-- 如果不同意，就不能点击这个按钮 -->
<button :disabled="!isAgree">下一步</button>
<br>

const vm = new Vue({
  el:"#vm",
  data(){
    return{
      isAgree:false,
    }
  },
})

当我们更改选择的时候 isAgree 从false变化到true 进而解锁button


 <!-- 复选框 checkbox  -->
<span>爱好选择:</span>
<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.join(',')}}</h2>

const vm = new Vue({
  el:"#vm",
  data(){
    return{
      hobbies:[],
    }
  },
})

当我们进行选择的时候， 选入那些值， 就会动态的添加到hobbies数组里面， 
删除也会自动从数组里面删除

5. v-model绑定select

 <!-- 单选 select -->
<select v-model="fruit">
  <option value="香蕉">香蕉</option>
  <option value="苹果">苹果</option>
  <option value="葡萄">葡萄</option>
  <option value="橘子">橘子</option>
</select>
<h2>你选择的水果为:{{fruit}}</h2>


<!-- 多选 select  -->
<select v-model="fruits" multiple>
  <option value="香蕉">香蕉</option>
  <option value="苹果">苹果</option>
  <option value="葡萄">葡萄</option>
  <option value="橘子">橘子</option>
</select>
<h2>你选择的水果为:{{fruits.join(',')}}</h2>

 const vm = new Vue({
  el:"#vm",
  data(){
    return{
      fruit:"苹果", //默认选择苹果
      fruits:[],
    }
  },
})
不同于 checkbox v-model 需要加载到 select 里面

6. v-model 的动态值生成以及获取

上诉checkbox 和 select 里面的值都是写死的， 
实际上应该不是这样的， 选项也应该是动态的

<!-- 值不写死， 动态输出可能的列表 -->
<label v-for="item in oringnHobbies" :for="item">
  <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>

 const vm = new Vue({
  el:"#vm",
  data(){
    return{
       oringnHobbies:['看电视', "看书", "看小说", "看飞机", "看动漫"],
    }
  },
})

我们通过遍历 oringnHobbies数组， 生成了这些checkbox， 然后把值动态的绑定到另外一个数组里面
这里就把值写活了.

7. v-model的修饰器使用

<!-- v-model 的修饰器 -->
<!-- 1.  .lazy 懒加载 -->
<!-- <input type="text" v-model.lazy="message">
{{message}} -->

<!-- 2. .number 类型转换为int -->
<!-- <input type="number" v-model.number="num">
{{typeof num}} -->

<!-- 3. .trim 去除周围的空格 -->
<!-- <input type="text" v-model.trim="message">
{{message}} -->

课后作业: 记事本的实现:

1. 记事本的实现:

需要这个代码的在下面留言

文章记录了关于v-model表单的基本操作，包括基本使用， v-model的原理解析， 绑定radio, checkbox, select ， 动态生成值以及修饰器，最后自己写了一个记事本的小案例.

本文地址：https://blog.****.net/qq_45906219/article/details/111875370