一、v-model绑定表单控件

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

1. 单行文本框 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>

运行图：

2. 单选框 input[type="radio"]

　 v-model 值绑定到 value属性；

 <body>

    <div id="app" style="padding-left:10px;">

       <input type="radio" name="fruit" value="apple" v-model="radioValue">apple

       <input type="radio" name="fruit" value="pear" v-model="radioValue">pear

       <input type="radio" name="fruit" value="banana" v-model="radioValue">banana

       <p>radioValue: {{radioValue}}</p>

    </div>

    <script src="./vue.js"></script>

    <script>

       var vm = new Vue({

          el:'#app',

          data:{

             radioValue:'pear',

          }

       })

    </script>

 </body>

运行图： 

3. 多选框 input[type="checkbox"]

  • 　 单个复选框：

　　　　 v-model 值为布尔值（true、false），绑定到 checked属性；

 <body>

    <div id="app" style="padding-left:10px;">

       <input type="checkbox" v-model="checkValue"><br/>

       <p>checkValue: {{checkValue}}</p>

    </div>

    <script src="./vue.js"></script>

    <script>

       var vm = new Vue({

          el:'#app',

          data:{

             checkValue:true

          }

       })

    </script>

 </body>

运行图：  

  •  多个复选框

　　　　  v-model 值为数组，绑定到 value属性（checkbox的vulue属性值必须要有）；

 <body>

    <div id="app" style="padding-left:10px;">

       <input type="checkbox" v-model="moreCheck" value="box1">box1

       <input type="checkbox" v-model="moreCheck" value="box2">box2

       <input type="checkbox" v-model="moreCheck" value="box3">box3

       <p>moreCheck: {{moreCheck}}</p>

    </div>

    <script src="./vue.js"></script>

    <script>

       var vm = new Vue({

          el:'#app',

          data:{

             moreCheck:['box2','box3']

          }

       })

    </script>

 </body>

运行图： 

二、v-model与v-bind结合使用

　　v-bind绑定属性，例如 v-bind:class="className"，缩写为 :class="className"；

 //结合v-bind和v-model，实现效果：修改select选中值，从而给div绑定不同的类名，进而改变div的字体颜色；

 <style>

   .blue{color:blue;}

   .red{color:red;}

   .green{color:green;}

 </style>

 <body>

    <div id="app">

       <div :class="selectValue">这是一行会变色的字</div>

       <select v-model="selectValue">

          <option value="blue">blue</option>

          <option value="red">red</option>

          <option value="green">green</option>

       </select>

    </div>

    <script src="./vue.js"></script>

    <script>

       var vm = new Vue({

          el:'#app',

          data:{

             selectValue:'red'

          }

       })

    </script>

 </body>

运行图： 

vue指令：v-model绑定表单控件；v-model与v-bind结合使用的更多相关文章

  1. 关于vue.js中v-model与表单控件的双向绑定。

    单选框:<input type="checkbox" id="checkbox" v-model="checked"><l ...

  2. Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件

    一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...

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

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

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

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

  5. Vue表单控件绑定

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

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

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

  7. vue v-model 表单控件绑定

    v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head ...

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

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

  9. Vue#表单控件绑定

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

随机推荐

  1. SwipeRefreshLayout的高度测量

    感谢此作者的分享 http://www.cnblogs.com/linjzong/p/5221604.html 若SwipeRefreshLayout的子布局为一个线性布局LinearLayout, ...

  2. Android Dialog的整个生命周期

    Activities提供了一种方便管理的创建.保存.回复的对话框机制,例如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog( ...

  3. 3The superclass “javax.servlet.http.HttpServlet" was not found on the Java Build Path 之一

    另外一篇短文里还有第三种解决方案,查看请点击这里 1.异常信息 创建maven web项目时,出现 The superclass “javax.servlet.http.HttpServlet&quo ...

  4. kafka介绍 - 官网

    介绍 Kafka是一个分布式的.分区的.冗余的日志提交服务.它使用了独特的设计,提供了所有消息传递系统所具有的功能. 我们先来看下几个消息传递系统的术语: Kafka维护消息类别的东西是主题(topi ...

  5. 福大软工1816：Beta（5/7）

    Beta 冲刺 (5/7) 队名:第三视角 组长博客链接 本次作业链接 团队部分 团队燃尽图 工作情况汇报 张扬(组长) 过去两天完成了哪些任务 文字/口头描述 组织会议 确定统一界面wxpy.db之 ...

  6. 使用dva脚手架（dva-cli）快速构建React项目

    安装 dva-cli 你应该会更希望关注逻辑本身,而不是手动敲入一行行代码来构建初始的项目结构,以及配置开发环境. 那么,首先需要安装的是 dva-cli .dva-cli 是 dva 的命令行工具, ...

  7. “拒绝了对对象数据库的 EXECUTE 权限”之解决

    “拒绝了对对象'aspnet_CheckSchemaVersion'的 EXECUTE 权限”之解决 [错误状态] “/XXX”应用程序中的服务器错误. ----------------------- ...

  8. 计算机中的换行符、回车符、\n、\r、\n\r 怎么区分啊？

    '\r'是回车,前者使光标到行首,(carriage return)'\n'是换行,后者使光标下移一格,(line feed) \r 是回车,return\n 是换行,newline对于换行这个动作, ...

  9. Oracle 数据库创建(图形界面操作)

    Oracle 创建数据库图文分解: 1. 选择所有程序->Oracle-OraDb11g_home1->Configuration and Migration Tools -> Da ...

  10. IIS : Add the server variable name to the allowed server variable list.

    IIS下设置反向代理访问时报错:将服务器变量名添加到允许的服务器变量列表中. 1.打开IIS: 2.打开要添加变量的站点: 3.打开URL Rewrite: 4.在右列上,选择“查看服务器变量(Vie ...