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

1、v-model 双向绑定文本

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

     <input v-model="message" placeholder="edit me">

     <p>Message is: {{ message }}</p>

 </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#app",

         data: {

             message: '绑定文本'

         }

     })

 </script>

 </html>

输出结果：

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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

     <<span>Multiline message is:</span>

     <p style="white-space: pre">{{ message }}</p>

     <br>

     <textarea v-model="message" placeholder="add multiple lines"></textarea>

 </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#app",

         data: {

             message: '绑定多行文本'

         }

     })

 </script>

 </html>

输出结果：

3、v-model 绑定复选框

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

     <input type="checkbox" id="checkbox" v-model="checked">

     <label for="checkbox">{{ checked }}</label>

 </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#app",

         data: {

             checked: 'true'

         }

     })

 </script>

 </html>

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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

     <input type="checkbox" id="jack" value="刘二狗" v-model="checkedNames">

     <label for="jack">Jack</label>

     <input type="checkbox" id="john" value="张麻子" v-model="checkedNames">

     <label for="john">John</label>

     <input type="checkbox" id="mike" value="小狗子" v-model="checkedNames">

     <label for="mike">Mike</label>

     <br>

     <span>Checked names: {{ checkedNames }}</span>

 </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#app",

         data: {

             checkedNames: []

         }

     })

 </script>

 </html>

输出结果：

4、v-model 绑定单选按钮

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

     <input type="radio" id="one" value="One" v-model="picked">

     <label for="one">One</label>

     <br>

     <input type="radio" id="two" value="Two" v-model="picked">

     <label for="two">Two</label>

     <br>

     <span>Picked: {{ picked }}</span>

 </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#app",

         data: {

             picked: ''

         }

     })

 </script>

 </html>

输出结果：

5、v-model 绑定下拉列表

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

     <select v-model="selected">

         <option>A</option>

         <option>B</option>

         <option>C</option>

     </select>

     <span>Selected: {{ selected }}</span>

 </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#app",

         data: {

             selected: ''

         }

     })

 </script>

 </html>

输出结果：

多选列表

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

     <select v-model="selected" multiple style="width: 50px">

         <option>A</option>

         <option>B</option>

         <option>C</option>

     </select>

     <br>

     <span>Selected: {{ selected }}</span>

 </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#app",

         data: {

             selected: []

         }

     })

 </script>

 </html>

输出结果：

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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

     <select v-model="selected">

         <option v-for="option in options" v-bind:value="option.value">

             {{ option.text }}

         </option>

     </select>

     <span>Selected: {{ selected }}</span>

 </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#app",

         data: {

             selected: 'A',

             options: [

                 { text: 'One', value: 'A' },

                 { text: 'Two', value: 'B' },

                 { text: 'Three', value: 'C' }

             ]

         }

     })

 </script>

 </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. 包含.h就可以用其对应的函数

    //callee.h 被调用者 #pragma once void display(); //展示函数 //callee.cpp 被调用者 #include "callee.h" ...

  2. iOS 新浪微博－1.0框架搭建

    项目搭建 1.新建一个微博的项目,去掉屏幕旋转 2.设置屏幕方向-->只有竖向 3.使用代码构建UI,不使用storyboard 4.配置图标AppIcon和LaunchImage 将微博资料的 ...

  3. IBatis 配置各种数据库

    IBatis 与各种数据库之间的配置在providers.config这个文件下. <?xml version="1.0" encoding="utf-8" ...

  4. location对象查询字符串参数

    虽然location.search可以返回从问号到URL末尾的所有内容,但却没有办法逐个访问其中的每个查询字符串参数.为此,可以创建下面这样一个函数,用以解析查询字符串,然后返回包含所有参数的一个对象 ...

  5. discuz formhash

    class.core.php中 $this->var['formhash'] = formhash();define('FORMHASH', $this->var['formhash']) ...

  6. VS中代码对齐等快捷键

    在VS2008中,选定代码后,按Ctrl+K+F组合键,可以自动进行代码对齐. 注意:要先按下Ctrl和K,再按下F,因为Ctrl+F是查找的快捷键. 也可以先按下Ctrl+K,再按下Ctrl+F. ...

  7. <Convolutional Neural Network for Paraphrase Identification>

    code:https://github.com/chantera/bicnn-mi Yin的这篇论文提出了一种叫Bi-CNN-MI的架构,其中Bi-CNN表示两个使用Siamese框架的CNN模型:M ...

  8. zw版【转发·台湾nvp系列Delphi例程】HALCON SmallestRectangle2

    zw版[转发·台湾nvp系列Delphi例程]HALCON SmallestRectangle2 procedure TForm1.Button1Click(Sender: TObject);var ...

  9. zw版【转发·台湾nvp系列Delphi例程】HALCON SmallestRectangle1

    zw版[转发·台湾nvp系列Delphi例程]HALCON SmallestRectangle1 procedure TForm1.Button1Click(Sender: TObject);var ...

  10. LoadRunner11支持的浏览器小结-Loadrunner11打不开IE浏览器的问题

    http://www.cnblogs.com/qmfsun/p/4807237.html