一、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. vue项目部署上线

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对 ...

  2. 【Java】解析xml

    xml: <?xml version="1.0" encoding="GB2312"?> <RESULT> <VALUE> ...

  3. Oracle EBS 更新客户地点

    --更新客户地点 declare x_return_status ); x_msg_count NUMBER; x_msg_data ); x_profile_id NUMBER; l_locatio ...

  4. PHP CLI模式下echo换行

    近日在执行导库程序的时候,需要在CLI模式下运行程序进行调试,如下图,这是什么鬼?不是我想要的结果 后经过查资料发现代码中执行的输出为 //错误方法实例 echo '其他-683\n'; //正确打开 ...

  5. 1. 安装Oracle，配置环境 2. 实现查询From子句 3. 实现查询where子句 4. 实现查询order by子句

    一.环境安装1. 登录:以管理员身份登录 sqlplus 登录名/密码 管理员身份登录:sqlplus system/1234562. 登录后,导入案例.下载scott.sql文件,执行下面一行的命令 ...

  6. Python运算符之三元运算符

    三元运算符:也称之为条件表达式 [条件为真的结果] if 条件 else [条件为假的结果] 如: ium01 = 100 if100 > 200 else200 print(num01) #三 ...

  7. idea html热部署

    IDEA SpringBoot 热部署+html修改无需make自动刷新 收藏 HeyS1 发表于 3个月前 阅读 310 收藏 2 点赞 0 评论 0 特邀IBM大咖的主题沙龙,5月20日·北京·3 ...

  8. 如何确定PHP CLI 的php.ini文件的位置

    当我们安装扩展时,可能需要手动配置php.ini文件,把扩展加进去,所以要确认PHP CLI的php.ini文件的位置.可以运行php --ini查找PHP CLI的ini文件位置,结果类似如下(各个 ...

  9. [转] pom.xml 配置详解

    From:http://blog.csdn.net/ithomer/article/details/9332071 Maven是一个项目管理工具,通过pom.xml来实现. pom.xml 配置文件 ...

  10. Spring-IOC bean 生命周期之 Lifecycle 钩子

    Lifecycle callbacks Initialization callbacks.Destruction callbacks 要与容器的bean生命周期管理交互,即容器在启动后和容器在销毁前对 ...