浅析Vue.js中v-bind v-model的使用和区别

更新时间：2018年12月04日 08:00:55 作者：itKingOne

v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定。这篇文章主要介绍了Vue.js中v-bind v-model的使用和区别,需要的朋友可以参考下

v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据

最基础的就是实现一个联动的效果

<body>
  <div class="app">
    <span>Multiline message is:</span>
    <p>{{message}}</p>
    <br>
    <textarea name="" v-model="message" placeholder="please write..."></textarea>
  </div>

</body>
<script>
  new Vue({
     el:'.app'
  })
</script>

checkbox

<body>
  <div class="app">
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
    <label for="jack">jack</label>
    <input type="checkbox" id="John" value="John" v-model="checkedNames">
    <label for="jack">John</label>
    <input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
    <label for="jack">Mike</label>
    <br>
    <span>Checked names:{{checkedNames}}</span>
  </div>
  
</body>
<script>
  new Vue({
     el:'.app',
     data:{
       checkedNames:[]
     }
  })
</script>

v-bind

有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 HTML 特性

总结

以上所述是小编给大家介绍的Vue.js中v-bind v-model的使用和区别，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

antd Vue实现Login登录页面布局案例详解附带验证码验证功能
这篇文章主要介绍了antd Vue实现Login登录页面布局案例详解附带验证码验证功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-05-05
Vue渲染过程浅析
这篇文章主要介绍了Vue渲染过程浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
Vue 监听元素前后变化值实例
这篇文章主要介绍了Vue 监听元素前后变化值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue中view-model双向绑定基础原理解析
这篇文章主要介绍了vue中view-model双向绑定基础原理，文中给大家介绍了vue双向绑定的原理总结，本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
2022-10-10
详解一次Vue低版本安卓白屏问题的解决过程
这篇文章主要介绍了详解一次Vue低版本安卓白屏问题的解决过程,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
详解vue开发中调用微信jssdk的问题
这篇文章主要介绍了vue开发中调用微信jssdk的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue中的过滤器及其时间格式化问题
这篇文章主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
vue跳转同一个路由参数不同的问题
这篇文章主要介绍了vue跳转同一个路由参数不同的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
如何将百度地图包装成Vue的组件的方法步骤
这篇文章主要介绍了如何将百度地图包装成Vue的组件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-02-02
Vue读取本地静态文件json的2种方法以及优缺点
这篇文章主要介绍了Vue读取本地静态文件json的2种方法以及优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09