脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 指令表单控件绑定

vue指令之表单控件绑定v-model v-model与v-bind结合使用

 更新时间：2019年04月17日 11:21:48   作者：anyxl  
这篇文章主要介绍了vue指令之表单控件绑定v-model v-model与v-bind结合使用,需要的朋友可以参考下

一、表单控件绑定v-model

v-model 双向数据绑定；一般用于表单元素，会忽略表单元素的value、checked、selected的初始值，且将Vue实例的数据作为数据来源。

① 单行文本框 input[type="text"] 、多行文本框 textarea：

　 v-model值绑定到value属性；

<body>
  <div id="app">
   <input type="text" v-model="username" value="我是初始值，但是我被忽略了"><br/>
   <textarea v-model="schoolname" value="我是初始学校：北大青鸟"></textarea><br/>
  </div>
  <script src="./vue.js"></script>
  <script>
   var vm = new Vue({
     el:'#app',
     data:{
      username:'小鸣',
      schoolname:'XX科技大学'
     }
   })
  </script>
</body>

ps：下面看下Vue 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指令之表单控件绑定v-model v-model与v-bind结合使用 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • Element MessageBox弹框的具体使用

    Element MessageBox弹框的具体使用

    这篇文章主要介绍了Element MessageBox弹框的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 详解Vue3如何加载动态菜单

    详解Vue3如何加载动态菜单

    这篇文章主要为大家详细介绍了Vue3是如何实现加载动态菜单功能的，文中的示例代码讲解详细，对我们学习Vue有一定帮助，需要的可以参考一下
    2022-07-07
  • 详解如何配置vue-cli3.0的vue.config.js

    详解如何配置vue-cli3.0的vue.config.js

    这篇文章主要介绍了详解如何配置vue-cli3.0的vue.config.js，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue+canvas实现水印功能

    Vue+canvas实现水印功能

    实际项目中偶尔会遇到给项目页面背景加水印的需求,这篇文章主要为大家介绍了Vue使用canvas实现水印功能的示例代码，希望对大家有所帮助
    2023-07-07
  • 解决Vue数据更新了但页面没有更新的问题

    解决Vue数据更新了但页面没有更新的问题

    在vue项目中,有些我们会遇到修改完数据,但是视图却没有更新的情况,具体的场景不一样,解决问题的方法也不一样,在网上看了很多文章,在此总结汇总一下,需要的朋友可以参考下
    2023-08-08
  • 安装vue3开发者工具但控制台没有显示出vue选项的解决

    安装vue3开发者工具但控制台没有显示出vue选项的解决

    这篇文章主要介绍了安装vue3开发者工具但控制台没有显示出vue选项的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue项目中路由跳转页面不变问题及解决

    vue项目中路由跳转页面不变问题及解决

    这篇文章主要介绍了vue项目中路由跳转页面不变问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • Vue项目打包成exe可执行文件的实现过程(无瑕疵,完美版)

    Vue项目打包成exe可执行文件的实现过程(无瑕疵,完美版)

    突然接到公司需求,说客户想让我们把项目直接打包,所以下面这篇文章主要给大家介绍了关于Vue项目打包成exe可执行文件的实现过程,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 一文带你掌握 Vue3.5常用特性

    一文带你掌握 Vue3.5常用特性

    Vue3.5 发布已近半年,这篇文章主要来和大家技术一下它常用的新增和改动特性,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
    2025-01-01
  • Vue开发高德地图应用的最佳实践

    Vue开发高德地图应用的最佳实践

    要在Web页面中加入地图，我推荐你使用高德地图,下面这篇文章主要给大家介绍了关于Vue开发高德地图应用的最佳实践,需要的朋友可以参考下
    2021-07-07

最新评论