Vue3--vue双向绑定v-module

vue双向绑定v-module

v-model 原理

v-bind绑定value属性的值；

v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中

手动实现双向绑定

<input type="text" :value="message" @input="inputChange" />
...
       data() {
          return {
            message: "Hello Vue",
          };
        },
        methods: {
          inputChange(event) {
            this.message = event.target.value;
          },
        },

v-model 绑定textarea

<textarea cols="30" rows="10" v-model="content"></textarea>

v-model 绑定checkbox

checkbox单选框 绑定到属性中的值是一个Boolean此时input的value属性并不影响v-model的值

	<label for="agree">
        <input id="agree" type="checkbox" v-model="isAgree" /> 同意协议
    </label>
    <h2>单选框:{{isAgree}}</h2>

checkbox多选框 绑定到属性中 值是array 注意 多选框中 必须明确的绑定一个value值

 	<div class="hobbies">
        <h2>请选择你的爱好</h2>
        <label for="sing">
          <input id="sing" type="checkbox" v-model="hobbies" value="sing" />唱
        </label>
        <label for="jump">
          <input id="jump" type="checkbox" v-model="hobbies" value="jump" />跳
        </label>
        <label for="rap">
          <input id="rap" type="checkbox" v-model="hobbies" value="rap" />rap
        </label>
        <label for="basketball">
          <input
            id="basketball"
            type="checkbox"
            v-model="hobbies"
            value="basketball"
          />篮球
        </label>
        <h2>爱好{{hobbies}}</h2>
      </div>

v-model 绑定radio

绑定同一个值的时候本身就是互斥的 省略name不用写 radio单选框也要绑定value

	<div class="gender">
        <label for="male">
          <input type="radio" id="male" v-model="gender" value="male" />
          男
        </label>
        <label for="female">
          <input type="radio" id="female" v-model="gender" value="female" />" />
          女
        </label>
        <h2>性别{{gender}}</h2>
      </div>

v-model 绑定select

和checkbox一样，select也分单选和多选两种情况。
单选：只能选中一个值
v-model绑定的是一个值；
当我们选中option中的一个时，会将它对应的value赋值到fruit中；
多选：可以选中多个值
v-model绑定的是一个数组；
当选中多个值时，就会将选中的option对应的value添加到数组fruit中

	<select v-model="fruit">
        <option value="apple">苹果</option>
        <option value="orange">橘子</option>
        <option value="banana">香蕉</option>
      </select>
      <h2>单选{{fruit}}</h2>
      <hr />
      <select multiple size="3" v-model="fruits">
        <option value="apple">苹果</option>
        <option value="orange">橘子</option>
        <option value="banana">香蕉</option>
      </select>
      <h2>多选{{fruits}}</h2>

v-model .lazy

默认情况下 v-model在进行双向绑定时 绑定的是input事件 那么会在每次内容输入后就将最新的值和绑定的属性进行同步 如果我们在v-model后跟上lazy修饰符 那么会将绑定的事件切换为change事件 只有在提交时（比如回车,失去焦点）才会触发

      <input type="text" v-model.lazy="message" />
      <h2>{{message}}</h2>

v-model .number

number 自动将内容转换为数字

      <input type="text" v-model.number="counter" />
      <h2>counter:{{counter}}-{{typeof counter}}</h2>

v-model .trim

trim去除首位的空格

      <input type="text" v-model.trim="content" />
      <h2>content:{{content}}</h2>

使用多个修饰符

		<input type="text" v-model.trim.lazy="content" />
		<h2>content:{{content}}</h2>