Vue学习总结（十一）——表单绑定v-model指令

最新推荐文章于 2023-12-12 08:30:00 发布

田小江爱分享

最新推荐文章于 2023-12-12 08:30:00 发布

阅读量1.6k

点赞数

分类专栏： Vue学习笔记文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/third_/article/details/119812621

版权

Vue学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

表单控件在实际开发中是非常常见的。特别是用户信息的提交，需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。

1、v-model的基本使用

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--双向绑定的基本使用-->
  <input type="text" v-model="message">
  {{message}}
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>
</body>

</html>

执行结果如下，可以看到输入框直接放入了message的值，当message的值发生改变的时候，输入框的值也发生了改变，当输入框内的值发生改变时，message的值也发生了改变：

2、v-model的原理

v-model实际上是一个语法糖，是实现了两个指令操作：

v-bind指令绑定一个value属性。
v-on指令给当前元素绑定input事件。

v-model也可以绑定到textarea上使用，使用效果是一样的。

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--双向绑定的基本使用-->
  <!-- <input type="text" v-model="message"> -->
  <!--实际可以通过两个指令自己实现双向绑定, 使用:value将message的值绑定到value上，使用@input可以监听input的输入变化，修改message-->
  <input type="text" :value="message" @input="valueChange">
  <!--简单写法-->
  <input type="text" :value="message" @input="message = $event.target.value">
  <h2>{{message}}</h2>
  <!--v-model也可以绑定到textarea上-->
  <textarea v-model="textareaMessage"></textarea>
  <h2>{{textareaMessage}}</h2>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      textareaMessage: 'hello呀'
    },
    methods: {
      valueChange(event) {
        this.message = event.target.value
      }
    }
  })
</script>
</body>

</html>

执行结果如下：

3、v-model结合radio类型使用

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--name一样主要是为了两个单选框互斥-->
  <!--如果绑定了两个一样的v-model也是可以互斥的，就不用加name了-->
  <label for="male">
    <input type="radio" id="male" name="sex" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" name="sex" value="女" v-model="sex">女
  </label>
  <h2>你选择的性别是：{{sex}}</h2>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      sex: '男',
    }
  })
</script>
</body>

</html>

执行结果如下：

我们在data里面给了默认值是男：

点击女切换后效果如下：

4、v-model结合checkbox类型使用

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--1、checkbox单选框的使用-->
  <!--label的好处是不止可以点击选框，还可以点击文字-->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h2>你选择的是：{{isAgree}}</h2>
  <!--使用disabled,同意的时候可以点下一步,不同意的时候不可以点-->
  <button :disabled="!isAgree">下一步</button>
  <br>
  <!--2、checkbox多选框的使用-->
  <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}}</h2>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isAgree: true, // 单元框对应布尔值.
      hobbies: [] // 多选框对应数组
    }
  })
</script>
</body>

</html>

执行结果如下：

5、v-model结合select使用

和checkbox一样，select也分单选和多选两种情况。

单选：只能选中一个值。

v-model绑定的是一个值。
当我们选中option中的一个时，会将他对应的value赋值到mySelect中。

多选：可以选中多个值

v-model绑定的是一个数组。
当选中多个值时，就会将选中的option对应的value添加到数组mySelect中。

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--选择一个-->
  <!--v-mode要绑定到select上,下面只是select的选项而已-->
  <select value  v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="柚子">柚子</option>
    <option value="西瓜">西瓜</option>
    <option value="香蕉">香蕉</option>
  </select>
  <h2>选择的水果是: {{fruit}}</h2>
  <!--选择多个,要加上multiple字段-->
  <select value  v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="柚子">柚子</option>
    <option value="西瓜">西瓜</option>
    <option value="香蕉">香蕉</option>
  </select>
  <h2>选择的水果是: {{fruits}}</h2>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      fruit: '香蕉',
      fruits: []
    }
  })
</script>
</body>

</html>

执行结果如下：

6、值绑定

就是动态的给value赋值，就是v-bind。

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--input值绑定-->
  <label v-for="item in originHobbies">
    <input type="checkbox" :value="item" v-model="hobbies">{{item}}
  </label>
  <h2>您的爱好是：{{hobbies}}</h2>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: [], // 多选框对应数组
      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '高尔夫球', '台球']
    }
  })
</script>
</body>

</html>

执行结果如下：

7、修饰符

lazy修饰符：

默认情况下，v-model默认实在input事件中同步输入框的数据的。
也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新。

number修饰符：

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被挡住字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接讲内容当做数字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型。

trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除。
trim修饰符可以过滤内容左右两边的空格。

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--1、修饰符: lazy --只会让在输入焦点和回车时才更新-->
  <input type="text" v-model.lazy="message">
  <div>{{message}}</div>
  <!--2、修饰符: number --v-model默认绑过去的东西为String类型，
    所以初始的时候是number，后面变成了String类型，所以要用.number修饰符-->
  <input type="number" v-model.number="age">
  <div>{{typeof age}}</div>
  <!--3、修饰符: trim可以过滤左右两侧的空格 -->
  <input type="text" v-model.trim="name">
  <div>您输入的名字是--加了trim的： {{name}}</div>
  <input type="text" v-model="name1">
  <div>您输入的名字是--没加trim的： {{name1}}</div>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      age: 0,
      name: 'gay yang',
      name1: 'gay yang',
    }
  })
</script>
</body>
</html>

执行结果如下：