一起学Vuejs（七）----- v-model修饰符

不积跬步，无以至千里；不积小流，无以成江海。

 

Vuejs语言基础

 

lazy 修饰符：

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

number 修饰符：

默认情况下，在输入框中的输入都会被当做字符串类型进行处理，但是当希望处理的是数字类型，number 修饰符可以让在输入框中输入的内容直接直接转换成数字类型。

trim 修饰符：

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

<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}}</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: '',
      name: '',
    }
  })
</script>