一、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. 【Python】Java程序员学习Python（七）— 文本类详解（字符串、str）

    如果一个女孩子喜欢看龙猫,那么请珍惜她,呵护她 任何一门语言,字符串总是最基本也是最需要掌握的一个变量,想想入门的Hello World,输出的就是字符串. 官方文档:https://docs.pyt ...

  2. 相关与卷积（数字信号处理）的数学原理及 Python 实现

    数学原理 在数字信号处理中,相关(correlation)可以分为互相关(cross correlation)和自相关(auto-correlation). 互相关是两个数字序列之间的运算:自相关是单 ...

  3. LeetCode题解之Intersection of Two Linked Lists

    1.题目描述 2.问题分析 使用unordered_set 将链表A中的节点地址全部插入,然后使用链表B中的每个节点在A中查找. 3.代码 ListNode *getIntersectionNode( ...

  4. oracle动态添加一条记录

    /// <summary> /// 添加一个实体 /// </summary> /// <typeparam name="T">实体名称< ...

  5. 【 PostgreSQL】后台周期执行函数实例（shell+crontab）

    工作中常见函数后台周期执行的情况,Oracle有job实现,gp数据库可以通过shell+crontab实现.流程如下: gpadmin用户下创建函数sh脚本. 将sh挂在crontab任务上 ### ...

  6. flask的orm操作

    django是有orm操作的  可想而知 那么flask也是有orm操作的,其实flask的orm操作的使用和djnago的是差不多的 django的orm操作进行条件筛选的时候后面跟着的是objec ...

  7. makedown 软件

    windows上的新手使用makedownpad 很适合的 下载之后你需要激活makedownpad MarkdownPad 2 Pro 注册码(邮箱+许可密钥) 邮箱 Soar360@live.co ...

  8. 解决 hibernate cannot define positional parameter after any named parameters have been defined

    解决 hibernate  cannot define positional parameter after any named parameters have been defined 把模糊查询的 ...

  9. win10不错的快捷键

      A I S number 左右 上下 , Win键 Open Action center. Open Settings. Open Search. Open the app pinned to t ...

  10. Mina使用总结(二)Handler

    Handler的基本作用,处理接收到的客户端信息 一个简单的Handler实现如下: package com.bypay.mina.handler; import java.util.Date; im ...