Vue v-model的修饰符.lazy、.number、.trim

最新推荐文章于 2024-04-12 15:16:43 发布

每一天，每一步

最新推荐文章于 2024-04-12 15:16:43 发布

阅读量318

点赞数

分类专栏： Vue 文章标签： html5 vue

本文链接：https://blog.csdn.net/u010234868/article/details/120333158

版权

Vue 专栏收录该内容

122 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>v-model不带修饰符，在input事件触发后将输入框的值与数据进行同步</p>
    msg1: {{ msg1 }}
    <br>
    msg1: <input type="text" v-model="msg1">
    <br>
    <p>v-model带修饰符.lazy，在change事件之后将输入框的值与数据进行同步</p>
    msg2: {{ msg2 }}
    <br>
    msg2: <input type="text" v-model.lazy="msg2">
    <hr>
    <p>v-model不带修饰符.number，即使在type="number"时，HTML输入元素的值也总会返回字符串</p>
    number1: {{ number1 }}
    <br>
    number1: <input @keyup.enter="onEnter1" type="number" v-model="number1">
    <p>v-model带修饰符.number，HTML输入元素的值会返回数值</p>
    number2: {{ number2 }}
    <br>
    number2: <input @keyup.enter="onEnter2" type="number" v-model.number="number2">
    <hr>
    <p>v-model不带修饰符.trim，首尾空白字符不会被过滤</p>
    text1: {{ text1 }}
    <br>
    text1: <input type="text" @keyup.enter="onEnter3" v-model="text1">
    <p>v-model带修饰符.trim，自动过滤用户输入的首尾空白字符</p>
    text2: {{ text2 }}
    <br>
    text2: <input type="text" @keyup.enter="onEnter4" v-model.trim="text2">
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          msg1: '',
          msg2: '',
          number1: 0,
          number2: 0,
          text1: '',
          text2: ''
        }
      },
      methods: {
        onEnter1() {
          console.log(typeof(this.number1));
        },
        onEnter2() {
          console.log(typeof(this.number2));
        },
        onEnter3() {
          console.log('[' + this.text1 + ']');
        },
        onEnter4() {
          console.log('[' + this.text2 + ']');
        }
      }
    })
  </script>
</body>
</html>

每一天，每一步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue v-model的修饰符.lazy、.number、.trim

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.
复制链接

扫一扫