推荐：​​Vue汇总​​

Vue - v-model

​​v-model​​可以在表单控件或者组件上创建双向绑定。

双向绑定

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>v-model</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="div">
      <input v-model="inputValue">
    </div>
  </body>
</html>
<script>
  var vue = new Vue({
    el: '#div',
    data: {
      inputValue: 'Kaven'
    }
  })
</script>

效果如下面三张图：

Vue - v-model_前端


改变​​inputValue​​的值，输入框的值会跟着变。

Vue - v-model_vue.js_02


改变输入框中的值，​​inputValu​​​e的值也会跟着变，这就是​​v-model​​​的双向绑定，和​​v-bind​​​的单向绑定不一样：​​Vue - v-bind​​，因为它们的应用场景不一样，​​v-bind​​​可以做样式的动态变化（单向绑定即可），而​​v-model​​可以做数据的同步（需要双向绑定）。

Vue - v-model_html_03

修饰符

  • ​​.lazy​​​ : 取代 ​​input​​​ 监听 ​​change​​ 事件。
  • ​​.number​​ ： 输入字符串转为有效的数字。
  • ​​.trim​​ ： 输入首尾空格过滤。

.lazy

​​lazy​​是懒惰的意思，看个例子大家就明白了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>v-model</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="div">
      <input v-model="inputValue">{{inputValue}}
    </div>
  </body>
</html>
<script>
  var vue = new Vue({
    el: '#div',
    data: {
      inputValue: 'Kaven'
    }
  })
</script>

当改变输入框中的值时，旁边的文本同时也会相应跟着变化。

Vue - v-model_html_04

加上​​.lazy​​修饰符，就会不一样了：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>v-model</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="div">
      <input v-model.lazy="inputValue">{{inputValue}}
    </div>
  </body>
</html>
<script>
  var vue = new Vue({
    el: '#div',
    data: {
      inputValue: 'Kaven'
    }
  })
</script>

当改变输入框中的值时，文本中的值是不会变化的（注意光标还在输入框内）。

Vue - v-model_javascript_05


而当输入框失去焦点时，文本中的值才会改变（注意光标不在输入框内），这就是​​"偷懒"​​。

Vue - v-model_css_06


.number

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>v-model</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="div">
      <input v-model.number="inputValue">{{inputValue}}
    </div>
  </body>
</html>
<script>
  var vue = new Vue({
    el: '#div',
    data: {
      inputValue: 2
    }
  })
</script>

效果如下图：

在输入框中输入​​555kaven​​​，得到的是​​2555​​​，并且是​​number​​类型。

Vue - v-model_javascript_07


但如果第一个字符就输入不是数字字符的话，这个修饰符感觉就没有用了，并且是​​string​​类型。

Vue - v-model_html_08


.trim

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>v-model</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="div">
      <input v-model.trim="inputValue">{{inputValue}}
    </div>
  </body>
</html>
<script>
  var vue = new Vue({
    el: '#div',
    data: {
      inputValue: '2'
    }
  })
</script>

将输入的首尾空格成功过滤了。

Vue - v-model_vue.js_09

​​v-model​​的使用就介绍到这里。

写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！