一、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. 数字时钟（DigitalClock）

    数字时钟(DigitalClock) 这个其实就是我们平时看到的手机上面显示的时间 很简单 1.Activity //数字时钟 public class DigitalClockActivity ex ...

  2. HTML复习总结

  3. git常用命令简集

    基础操作: 初始化git仓库: git init 提交到暂存区: git add “filename” 提交到分支: git commit -m "注释" 工作区状态: git s ...

  4. Excel连接字符串在.NET中的应用

    转:https://www.cnblogs.com/jaxu/archive/2011/07/29/2121022.html 介绍几种在.NET中直接连接Excel作为数据源的几种方法以及连接字符串的 ...

  5. Datastage重启服务

    使用DS开发job时,偶尔一个Job出现卡死现象,导致工作不能进展下去,有时候需要重启datastage服务才可以. DataStage在正常运行时候有以下两个主要的进程: (1)dsrpcd(DS的 ...

  6. 第一章：了解SQL_数据库基础

    什么是数据库(database): 数据库(database)是保存有组织的数据的容器(通常是一个文件或一组文件).数据库是一种以某种有组织的方式存储的数据集合.   表(table): 表(tabl ...

  7. [OPENSSL下载][证书] OPENSSL将PFX证书转换为PEM格式

    OpenSSL Convert PFX Convert PFX to PEM openssl pkcs12 -in certificate.pfx -out certificate.cer -node ...

  8. 优化tableView加载cell与model的过程

    优化tableView加载cell与model的过程 效果图 说明 1. 用多态的特性来优化tableView加载cell与model的过程 2. swift写起来果然要比Objective-C简洁了 ...

  9. oracle监听，数据库，oracle服务器的启动和停用

    一.oracle监听,数据库,oracle服务器的启动和停用 使用root用户登录:切换用户su – root/root操作系统,一般只有root用户才有权限去操作系统中安装的oracle数据库服务器 ...

  10. 个人技术博客二之apk反编译与加密

    根据原文郭霖大神的博客Android安全攻防战,反编译与混淆技术完全解析 本人亲测反编译真的没有什么卵用,个人纯属好奇就去搜了一下,偷窃有罪,抄袭可耻. 1.手机上的apk都是打包好的,直接安装使用. ...