v-model修饰符的使用

最新推荐文章于 2023-12-13 09:02:57 发布

Eli-sun

最新推荐文章于 2023-12-13 09:02:57 发布

阅读量195

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/vfjcgg/article/details/106770051

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

v-model修饰符的使用

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

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

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <!--1.修饰符lazy-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

  <!--2.修饰符number-->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

  <!--3.修饰符：trim-->
  <input type="text" v-model.trim="name">
  <h2>你输入的名字是：{{name}}</h2>
</div>

<script src="../vue.min.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
      age:18,
      name:''
    }
  })
</script>
</body>
</html>