vue的v-model及修饰符

209 阅读1分钟

v-model实现表单元素和数据的双向绑定 

他的实质是v-bind指令和v-on:input的结合。不管是dom还是后台进行改变,另一个必然跟着改变

<input type='text' v-model='message'>

<script> 

   const app =new Vue({ 

       el:'#app', 

      data:{ 

           counter:0,

           message:'aaa'

         }

   })

</script>  

lazy修饰符:v-model默认是同步输入框数据的lazy可以让失去焦点后才进行更新

<input type='text' v-model.lazy='message'>

 number:在输入框输入的都会被默认为字符串类型,number可以让自动转换成数字类型

<input type='text' v-model.number='message'>

trim:输入两边如果有很多空格,trim可以去除这些空格

<input type='text' v-model.trim='message'>