脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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结合使用 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • vue3+vite+ts父子组件之间的传值

    vue3+vite+ts父子组件之间的传值

    随着vue2的落幕,vue3越来成熟,有必要更新一下vue3的父子组件之间的传值方式,这里介绍下vue3+vite+ts父子组件之间的传值方式实例详解,感兴趣的朋友一起看看吧
    2023-12-12
  • 解决vue使用vant轮播组件swipe + flex时文字抖动问题

    解决vue使用vant轮播组件swipe + flex时文字抖动问题

    这篇文章主要介绍了解决vue使用vant轮播组件swipe + flex时文字抖动问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2021-01-01
  • vue 实现 ios 原生picker 效果及实现思路解析

    vue 实现 ios 原生picker 效果及实现思路解析

    这篇文章主要介绍了vue 实现 ios 原生picker 效果及实现思路解析,本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
    2017-12-12
  • 详细讲解vue2+vuex+axios

    详细讲解vue2+vuex+axios

    在vue2项目中，组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下（后台获取数据存入vuex，组件之间共享数据），那么就需要用vuex来管理这些。
    2017-05-05
  • vue如何对一个数据过滤出想要的item

    vue如何对一个数据过滤出想要的item

    这篇文章主要介绍了vue如何对一个数据过滤出想要的item问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • ElementUI中el-input无法输入、修改及删除问题解决办法

    ElementUI中el-input无法输入、修改及删除问题解决办法

    这篇文章主要给大家介绍了关于ElementUI中el-input无法输入、修改及删除问题的解决办法,这种问题产生是因为input在vue中的受控,我们需要去重新改变一下监听和实现,需要的朋友可以参考下
    2023-11-11
  • vue组件间通信六种方式（总结篇）

    vue组件间通信六种方式（总结篇）

    组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。这篇文章主要介绍了vue组件间通信六种方式,需要的朋友可以参考下
    2019-05-05
  • 在Vue中实现添加全局store

    在Vue中实现添加全局store

    这篇文章主要介绍了在Vue中实现添加全局store方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • Vue实现手机计算器

    Vue实现手机计算器

    这篇文章主要为大家详细介绍了Vue实现手机计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Vertx基于EventBus发送接受自定义对象

    Vertx基于EventBus发送接受自定义对象

    这篇文章主要介绍了Vertx基于EventBus发送接受自定义对象,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11

最新评论