Vue.js中v-model指令的作用是什么-创新互联

Vue.js中v-model指令的作用是什么，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联主要从事成都网站建设、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务多伦,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

v-model 指令在表单及 </code> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 <code>v-model</code> 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p><p><code>v-model</code> 会忽略所有表单元素的 <code>value</code>、<code>checked</code>、<code>selected</code> 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 <code>data</code>选项中声明初始值。</p><p>对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 <code>v-model</code> 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 <code>input</code> 事件。</p><p>一、input输入框绑定实例：</p><p>实现思路：</p><p> 分别定义data下的name,age,like，作为其初始值，当input输入框内的信息变化时，下面内容会发生变化，并更改data下的值。</p><p><img src="/upload/otherpic34/208474.jpg" alt="Vue.js中v-model指令的作用是什么"></p><pre>全部代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous"> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body>  <div id="app" class="container"> <div class=" col-xs-4 col-md-offset-4"> <h2>个人信息</h2> <div>姓名:<input type="text" v-model="name" class="form-control text-center" placeholder="请输入你的个人信息"> <pre>{{ name }}</pre> </div> <div>年龄:<input type="text" v-model="age" class="form-control text-center" placeholder="年龄"> <span>{{ age }}</span> </div> <div>爱好:<input type="text" v-model="like" class="form-control text-center" placeholder="爱好"> <span>{{ like }}</span> </div> </div> </div> <script> var app = new Vue({ el:"#app", data:{ name:"李四", age:24, like:"跑步" }, computed:{ sum: function () { return this.math + this.physics + this.english }, average:function () { return Math.round((this.sum/3)) } } }) </script> </body> </html></pre><pre>核心代码： <div id="app" class="container"> <div class=" col-xs-4 col-md-offset-4"> <h2>个人信息</h2> <div>姓名:<input type="text" v-model="name" class="form-control text-center" placeholder="请输入你的个人信息"> <pre>{{ name }}</pre> </div> <div>年龄:<input type="text" v-model="age" class="form-control text-center" placeholder="年龄"> <span>{{ age }}</span> </div> <div>爱好:<input type="text" v-model="like" class="form-control text-center" placeholder="爱好"> <span>{{ like }}</span> </div> </div> </div> <script> var app = new Vue({ el:"#app", data:{ name:"李四", age:24, like:"跑步" }, }) </script></pre><p>v-model的修饰符</p><p> input事件触发后将输入框的值与数据进行同步，当我们不想其更新太频繁的时候，就可以选择使用.lazy修饰符，就可以让其更新频率降低。此外input输入内容的类型均为字符格式，对于一些固定是数字的格式我们可以使用.number修饰符将其转换为数字，方便运算操作，不需要后期转换类型。</p><h4><code>.lazy</code></h4><p>在默认情况下，<code>v-model</code> 在每次 <code>input</code> 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 <code>lazy</code> 修饰符，从而转变为使用 <code>change</code> 事件进行同步：</p><table width="600"><tbody><tr><td width="600"><pre><br/><input v-model.lazy="msg" ><br/></pre></td></tr></tbody></table><h4><code>.number</code></h4><p>如果想自动将用户的输入值转为数值类型，可以给 <code>v-model</code> 添加 <code>number</code> 修饰符：</p><table width="600"><tbody><tr><td width="600"><pre><input v-model.number="age" type="number"><br/></pre></td></tr></tbody></table><p>这通常很有用，因为即使在 <code>type="number"</code> 时，HTML 输入元素的值也总会返回字符串。</p><p>在data定义的age为×××的数字，当我们重新输入内容时，发现其变为字符类型，这时我们可以加上.number的修饰符</p><p><img src="/upload/otherpic34/208476.jpg" alt="Vue.js中v-model指令的作用是什么"></p><pre><br/></pre><p><img src="/upload/otherpic34/208477.jpg" alt="Vue.js中v-model指令的作用是什么"></p><p>添加.number修饰符后</p><p><img src="/upload/otherpic34/208479.jpg" alt="Vue.js中v-model指令的作用是什么"></p><p><img src="/upload/otherpic34/208482.jpg" alt="Vue.js中v-model指令的作用是什么"></p><h4><code>.trim</code></h4><p>如果要自动过滤用户输入的首尾空白字符，可以给 <code>v-model</code> 添加 <code>trim</code> 修饰符：</p><table width="600"><tbody><tr><td width="600"><pre><input v-model.trim="msg"></pre></td></tr></tbody></table><p>未添加.trim属性前（注意普通的html对空格不敏感一般默认为一个，这里引入<pre></pre>标签）</p><p><img src="/upload/otherpic34/208485.jpg" alt="Vue.js中v-model指令的作用是什么"></p><p>添加其修饰符后</p><p><img src="/upload/otherpic34/208486.jpg" alt="Vue.js中v-model指令的作用是什么"></p><p>二、input 输入框类型为单选框</p><pre><h3>性别</h3> <label>男： <input type="radio" v-model="sex" value="male" class=""> </label> <label>女 <input type="radio" v-model="sex" value="female" ></label> <hr> 性别：{{ sex }} <script> var app = new Vue({ el:"#app", data:{ name:"李四", age:24, like:"跑步", sex:'female' }, }) </script></pre><p><img src="/upload/otherpic34/208489.jpg" alt="Vue.js中v-model指令的作用是什么"> <img src="/upload/otherpic34/208491.jpg" alt="Vue.js中v-model指令的作用是什么"></p><p>三、input 输入框类型为复选框</p><pre><h3>爱好：</h3> <label class="btn btn-default">跑步 <input type="checkbox" v-model="like" value="跑步" > </label class="btn btn-default"> <label class="btn btn-default">爬山 <input type="checkbox" v-model="like" value="爬山" > </label > <label class="btn btn-default">阅读 <input type="checkbox" v-model="like" value="阅读" > </label> <label class="btn btn-default">游泳 <input type="checkbox" v-model="like" value="游泳" > </label class="btn btn-default"> <label class="btn btn-default">逛街 <input type="checkbox" v-model="like" value="逛街" > </label > <label class="btn btn-default">健身 <input type="checkbox" v-model="like" value="健身" > </label> <hr> 爱好：{{ like }} <script> var app = new Vue({ el:"#app", data:{ name:"李四", age:24, info:"长江后浪推前浪", sex:'female', like:[] }, }) </script></pre><p> <img src="/upload/otherpic34/208494.jpg" alt="Vue.js中v-model指令的作用是什么"> <img src="/upload/otherpic34/208497.jpg" alt="Vue.js中v-model指令的作用是什么"></p><p>四、多行文本textarea</p><pre>多行文本 {{msg}}</pre><pre><script> var app = new Vue({ el:"#app", data:{ name:"李四", age:24, info:"长江后浪推前浪", sex:'female', like:[], msg:"多行文本" }, }) </script></pre><p><img src="/upload/otherpic34/208500.jpg" alt="Vue.js中v-model指令的作用是什么"></p><p>在文本区域插值 (<code><textarea>) 并不会生效，应用 v-model 来代替。

五、选择框

1、单选

单选

   
      请选择
      
      
      
   
   Selected: {{ selecte }}

Vue.js中v-model指令的作用是什么

2、多选



   
   
   



Selected: {{ selected }}

Vue.js中v-model指令的作用是什么

用 v-for 渲染的动态选项


Selected: {{ selected }}

new Vue({
 el: '...',
 data: {
  selected: 'A',
  options: [
   { text: 'One', value: 'A' },
   { text: 'Two', value: 'B' },
   { text: 'Three', value: 'C' }
  ]
 }
})

Vue.js中v-model指令的作用是什么

看完上述内容，你们掌握Vue.js中v-model指令的作用是什么的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：Vue.js中v-model指令的作用是什么-创新互联
网站网址：http://scyanting.com/article/codess.html

Vue.js中v-model指令的作用是什么-创新互联

其他资讯