VUE v-model表单数据双向绑定完整示例

更新时间：2019年01月21日 08:44:27 作者：黎成诃月

这篇文章主要介绍了VUE v-model表单数据双向绑定,结合完整实例形式分析了vue.js实现表单数据双向绑定相关操作技巧,需要的朋友可以参考下

本文实例讲述了VUE v-model表单数据双向绑定。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-model双向绑定</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <textarea v-model = "message" placeholer = '请在此输入文字'></textarea>
  <span>{{message}}</span>
   </br>
  <input type="text" v-model="data.name"/>
  <span>姓名：{{data.name}}</span>
  </br>
  <input type="radio" id="boy" value="男" v-model="data.gender"/>
  <label for="boy">男</label>
  <input type="radio" id="girl" value="女" v-model="data.gender"/>
  <lable for="girl">女</lable>
  <span>{{data.gender}}</span>
  <br/>
  <input type="checkbox" id="item1" value="阅读" v-model="data.interest"/>
  <lable for="item1">阅读</lable>
  <input type="checkbox" id="item2" value="打球" v-model="data.interest"/>
  <lable for="item2">打球</lable>
  <input type="checkbox" id="item3" value="体操" v-model="data.interest"/>
  <lable for="checkbox">体操</lable>
  <br/>
  <span>{{data.interest}}</span>
  <select v-model="data.identity">
    <option value="java" selected>java</option>
    <option value="web">web</option>
    <option value="hr">hr</option>
  </select>
  <span>身份：{{data.identity}}</span>
  <!--select：用 v-for 渲染的动态选项：-->
  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: '6',
      data: {
        name: '',
        gender: '',
        interest: [],
        identity: ''
      },
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  })
</script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:

vue2单元测试环境搭建
本篇文章给大家分享了vue2单元测试环境搭建的详细步骤，对此有需要的朋友参考学习下。
2018-05-05
Vue混入使用和选项合并详解
这篇文章主要介绍了Vue混入使用和选项合并，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2021-10-10
vue中的cookies缓存存值方式超简单
这篇文章主要介绍了vue中的cookies缓存存值方式，超简单！具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue19 组建 Vue.extend component、组件模版、动态组件的实例代码
这篇文章主要介绍了vue19 组建 Vue.extend component、组件模版、动态组件的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
vue中使用axios post上传头像/图片并实时显示到页面的方法
今天小编就为大家分享一篇vue中使用axios post上传头像/图片并实时显示到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
这篇文章主要介绍了解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue组件系列开发之模态框
这篇文章主要介绍了Vue组件系列开发之模态框，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
Vue查询数据并通过bootstarp table渲染数据
这篇文章主要为大家介绍了Vue查询数据并通过bootstarp table渲染数据，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
Vue监听属性和计算属性
这篇文章主要介绍了Vue监听属性和计算属性，基本用法添加watch属性，值为一个对象。对象的属性名就是要监视的数据，属性值为回调函数，每当这个属性名对应的值发生变化，就会触发该回调函数执行，下面来看详细内容,需要的朋友也可以参考一下
2021-12-12
详解Vue源码学习之callHook钩子函数
这篇文章主要介绍了详解Vue源码学习之callHook钩子函数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07