vue快速入门（十七）v-model数据双向绑定修饰符

代码对我眨眼睛

已于 2024-04-11 09:47:03 修改

阅读量524

点赞数 15

分类专栏： vue2 文章标签： vue.js 前端 javascript

于 2024-04-11 09:42:10 首次发布

本文链接：https://blog.csdn.net/m0_73756108/article/details/137245061

版权

vue2 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

本文介绍了Vue框架中v-model指令的两个特性：v-model.trim用于自动去除输入框首尾空格，v-model.number则可以将文本转为数字类型。通过HTML和JavaScript代码展示了如何在实际项目中使用这些功能。

摘要由CSDN通过智能技术生成

注释很详细，直接上代码

新增内容

v-model.trim 自动去除首尾空格
v-model.number 自动转换成数字类型

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 挂载点 -->
  <div id="root">
    <!-- v-model.trim 自动去除首尾空格 -->
    用户名：<input type="text" v-model.trim="username">
    <!-- v-model.number 自动转换成数字类型 -->
    年龄：<input type="text" v-model.number="age">
  </div>
    <!-- 导入vue的js代码：不会下载的看专栏第一篇 -->
    <script src="./lib/vue2.js"></script>

    <script>
      const app = new Vue({// Vue实例
        el: '#root',// 挂载点
        data: {// 数据
          username:'',
          age:null
        },
        methods: {// 方法
        }
      })
    </script>
</body>

</html>