dynamic 365 js 失去焦点_Vue.js 修饰符 - v-model修饰符

好好学习，天天向上

本章主要内容是：.trim、.lazy、.number

示例代码总体，后边的示例都是在此基础上：

<div id="app">
   
</div>
<script src="lib/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      inputValue: ''
    }
  });
</script>

1、.trim 修饰符

• 用于自动过滤用户输入内容首尾两端的空格

当我们只使用 v-model 时

<input type="text" v-model="inputValue">
<p>{{ inputValue }}</p>

通过示例可以看到 p 标签的前后空格没有显示在视图上，但是中的空格会显示一个空格，这是因为元素显示导致的一个问题，可以看到元素调试工具中的 p 标签内容与输入框的内容是一样的
设置 .trim 修饰符

<input type="text" v-model.trim="inputValue">
<p>{{ inputValue }}</p>

可以看到，中间空格会有，但是前后两端都不会有

---

2、.lazy 修饰符

• 用于将 v-model 的触发方式由 input 事件触发更改为 change 事件触发

可以将当前 v-model 修饰符进行双向数据绑定的效果进行改变，默认 v-model 双向数据绑定时，例如输入框，绑定的时候我们每次输入一个内容，这个内容就会自动的更新给数据，但如果我们希望将 v-model 双向数据绑定的触发方式从 ipnut 事件的每次输入就更新的这种触发方式更改为想 change 事件一样的触发方式，也就是每一次进行输入内容完毕以后，失去焦点时进行内容检测，如果新内容与旧内容不同时，再去进行双向数据绑定视图更新
把频繁的更新更改为指定操作方式更新

<input type="text" v-model.lazy="inputValue">
<p>{{ inputValue }}</p>

---

3、.number 修饰符

• 用于自动将用户输入的值转换为数值类型，如无法被 parseFloat() 转换，则返回原始内容

<input type="text" v-model.number="inputValue">
<p>{{ inputValue }}</p>