v-model 指令在表单控件元素上创建双向数据绑定，下面一一进行示例解释。

1、v-model 双向绑定文本

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <script type="text/javascript"  src="vue.js"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <input v-model="message" placeholder="edit me">
  11.      <p>Message is: {{ message }}</p>
  12.  </div>
  13.  </body>
  14.  <script>
  15.      var vm = new Vue({
  16.          el:"#app",
  17.          data: {
  18.              message: '绑定文本'
  19.          }
  20.      })
  21.  </script>
  22.  </html>

输出结果：

2、v-model 双向绑定多行文本，与上面的例子相似。

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <script type="text/javascript"  src="vue.js"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <<span>Multiline message is:</span>
  11.      <p style="white-space: pre">{{ message }}</p>
  12.      <br>
  13.      <textarea v-model="message" placeholder="add multiple lines"></textarea>
  14.  </div>
  15.  </body>
  16.  <script>
  17.      var vm = new Vue({
  18.          el:"#app",
  19.          data: {
  20.              message: '绑定多行文本'
  21.          }
  22.      })
  23.  </script>
  24.  </html>

输出结果：

3、v-model 绑定复选框

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <script type="text/javascript"  src="vue.js"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <input type="checkbox" id="checkbox" v-model="checked">
  11.      <label for="checkbox">{{ checked }}</label>
  12.  </div>
  13.  </body>
  14.  <script>
  15.      var vm = new Vue({
  16.          el:"#app",
  17.          data: {
  18.              checked: 'true'
  19.          }
  20.      })
  21.  </script>
  22.  </html>

输出结果：选中为true   不选中则为false

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <script type="text/javascript"  src="vue.js"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <input type="checkbox" id="jack" value="刘二狗" v-model="checkedNames">
  11.      <label for="jack">Jack</label>
  12.      <input type="checkbox" id="john" value="张麻子" v-model="checkedNames">
  13.      <label for="john">John</label>
  14.      <input type="checkbox" id="mike" value="小狗子" v-model="checkedNames">
  15.      <label for="mike">Mike</label>
  16.      <br>
  17.      <span>Checked names: {{ checkedNames }}</span>
  18.  </div>
  19.  </body>
  20.  <script>
  21.      var vm = new Vue({
  22.          el:"#app",
  23.          data: {
  24.              checkedNames: []
  25.          }
  26.      })
  27.  </script>
  28.  </html>

输出结果：

4、v-model 绑定单选按钮

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <script type="text/javascript"  src="vue.js"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <input type="radio" id="one" value="One" v-model="picked">
  11.      <label for="one">One</label>
  12.      <br>
  13.      <input type="radio" id="two" value="Two" v-model="picked">
  14.      <label for="two">Two</label>
  15.      <br>
  16.      <span>Picked: {{ picked }}</span>
  17.  </div>
  18.  </body>
  19.  <script>
  20.      var vm = new Vue({
  21.          el:"#app",
  22.          data: {
  23.              picked: ''
  24.          }
  25.      })
  26.  </script>
  27.  </html>

输出结果：

5、v-model 绑定下拉列表

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <script type="text/javascript"  src="vue.js"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <select v-model="selected">
  11.          <option>A</option>
  12.          <option>B</option>
  13.          <option>C</option>
  14.      </select>
  15.      <span>Selected: {{ selected }}</span>
  16.  </div>
  17.  </body>
  18.  <script>
  19.      var vm = new Vue({
  20.          el:"#app",
  21.          data: {
  22.              selected: ''
  23.          }
  24.      })
  25.  </script>
  26.  </html>

输出结果：

多选列表

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <script type="text/javascript"  src="vue.js"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <select v-model="selected" multiple style="width: 50px">
  11.          <option>A</option>
  12.          <option>B</option>
  13.          <option>C</option>
  14.      </select>
  15.      <br>
  16.      <span>Selected: {{ selected }}</span>
  17.  </div>
  18.  </body>
  19.  <script>
  20.      var vm = new Vue({
  21.          el:"#app",
  22.          data: {
  23.              selected: []
  24.          }
  25.      })
  26.  </script>
  27.  </html>

输出结果：

6、动态选项，用 v-for 渲染：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <script type="text/javascript"  src="vue.js"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <select v-model="selected">
  11.          <option v-for="option in options" v-bind:value="option.value">
  12.              {{ option.text }}
  13.          </option>
  14.      </select>
  15.      <span>Selected: {{ selected }}</span>
  16.  </div>
  17.  </body>
  18.  <script>
  19.      var vm = new Vue({
  20.          el:"#app",
  21.          data: {
  22.              selected: 'A',
  23.              options: [
  24.                  { text: 'One', value: 'A' },
  25.                  { text: 'Two', value: 'B' },
  26.                  { text: 'Three', value: 'C' }
  27.              ]
  28.          }
  29.      })
  30.  </script>
  31.  </html>

输出结果：

vue v-model 表单控件绑定的更多相关文章

  1. Vue进阶之表单控件绑定

    1.单行input <html> <head> <meta charset="UTF-8"> <meta name="viewp ...

  2. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  3. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  4. 表单控件绑定v-model

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  5. vue2.0 之表单控件绑定

    表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v- ...

  6. Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）

    话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  7. Vue#表单控件绑定

    使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...

  8. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

  9. vue表单控件绑定（表单数据的自动收集）

    v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...

随机推荐

  1. 移动端1px细线解决方案总结

    现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在 ...

  2. EditPlus 5.0 中文版已经发布（3月26日更新）

    注意:新版本不再支持旧的注册码! 新特性: - Ctrl+Alt+Up/Down 键可添加多个插入点以及进行列选择 - Alt+鼠标点击可添加多个插入点 - 连续执行“选择单词”命令可将多个选中项添加 ...

  3. appium记录

    npm uninstall appium -g npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install ...

  4. Python tricks(5) -- string和integer的comparison操作

    我们都知道, python是一个强类型的语言, 也是一个动态类型的语言. 但是在python2.X系列中, 这个强类型是需要打折扣的, 是非常接近强类型. 我们来看下面的代码片段 In [1]: 'a ...

  5. wamp下配置多域名和访问路径的方法

    wamp下配置多域名和访问路径的方法 1.到安装目录下,打开配置httpd.confD:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf也可以通过wamp图标 ...

  6. Qt 学习之路 2（55）：数据库操作

    Qt 提供了 QtSql 模块来提供平台独立的基于 SQL 的数据库操作.这里我们所说的“平台独立”,既包括操作系统平台,又包括各个数据库平台.另外,我们强调了“基于 SQL”,因为 NoSQL 数据 ...

  7. Java MD5校验与RSA加密

    区别: MD5加密: 加密时通过原字符串加密成另一串字符串 解密时需要原加密字符串进行重新加密比较两次加密结果是否一致 RSA加密: 加密时通过原字符串生成密钥对(公钥+私钥) 解密时通过公钥和私钥进 ...

  8. 基于Spring Cloud的微服务落地

    微服务架构模式的核心在于如何识别服务的边界,设计出合理的微服务.但如果要将微服务架构运用到生产项目上,并且能够发挥该架构模式的重要作用,则需要微服务框架的支持. 在Java生态圈,目前使用较多的微服务 ...

  9. mysql服务器，大量tcp连接状态TIME_WAIT

    今天早上,java应用中发现too many open files,检查了下使用的连接数发现基本上在两三百左右,mysql打开的文件数也就几百左右,再看所有tcp连接,发现3306的连接有4000多, ...

  10. SPOJ Prime or Not - 快速乘 - 快速幂

    Given the number, you are to answer the question: "Is it prime?" Solutions to this problem ...