vue中v-model修饰符的使用

最新推荐文章于 2024-08-19 15:53:46 发布

nanzai11111

最新推荐文章于 2024-08-19 15:53:46 发布

阅读量296

点赞数

分类专栏： vue学习心得文章标签： vue.js

本文链接：https://blog.csdn.net/nanzai11111/article/details/109096885

版权

vue学习心得专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1、.lazy修饰符-->
  <!--在没有加.lazy修饰符的时候，是实时绑定更新的，
  加入之后写完数据后，失去焦点或者回车的时候才进行更新-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

<!--  2、.number修饰符-->
  <!--不加的时候默认的类型是字符串的，如果需要的话还得类型转换成数字的
  但如果加上.number的话，确定这个数据就是number的在运用的时候就不用在进行类型转换了-->
  <input type = "number" v-model.number="age">
  <h2>{{typeof age}}</h2>

<!--  3、.trim修饰符-->
<!--  但我们的字符串两边有很多空格的时候，获取的时候需要消除空格-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊！！！',
      age:0,
      name:''
    }
  })
</script>
</body>
</html>