标签：控件 Vue 绑定 输入框 双向 修饰符 input Tracy message

v-model 双向绑定

• 用来实现表单元素 input 和数据的双向绑定
• 原理
  v-module 其实是一个语法糖，它的背后本质上包含两个操作： v-on:input 和 v-bind:value

  <input v-model="message" placeholder="edit me">

  相当于

  <input :value="message" @input="dataChange" placeholder="edit me">
  data:{
    message:'a'
  },
  methods: {
    dataChange(event) { this.message = event.target.value; }
  }
  或者
  <input :value="message" @input="message = $event.target.value" placeholder="edit me">
              

• 同意协议：
   同意协议 下一步 data:{ isAgree: false },
• 值绑定其实就是在双向绑定的时候设置一个默认值。 比如说在默认选择的是“男”
• 修饰符
  • .lazy： v-model 在每次 input 事件触发后将输入框的值与数据进行同步，加了该修饰符之后就是在回车或者失去焦点时数据才会更新
  • .number 自动将用户的输入值转为数值类型， 因为默认情况下无论我们在输入框输入什么内容都会被当做字符串进行处理
  • .trim:过滤用户输入的首尾空白字符
    <input v-model.trim="msg">

标签：控件,Vue,绑定,输入框,双向,修饰符,input,Tracy,message
来源： https://blog.csdn.net/weixin_48702807/article/details/117519661

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。