一、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（八）— 基本类型的基本运算

    这一篇待写,毕竟基本运算都是通用的.

  2. Linux 查看双节点是否做了SSH信任

    perl $AD_TOP/patch/115/bin/txkRunSSHSetup.pl verifyssh -contextfile=$CONTEXT_FILE -hosts=erpapp1,erp ...

  3. C语言const与#define

    const 定义的是变量不是常量,只是这个变量的值不允许改变是常变量!带有类型.编译运行的时候起作用存在类型检查. define 定义的是不带类型的常数,只进行简单的字符替换.在预编译的时候起作用,不 ...

  4. [翻译] BKZoomView

    BKZoomView https://github.com/freshking/BKZoomView A UIView that will zoom into its parent view. It ...

  5. [翻译] GCDiscreetNotificationView

    GCDiscreetNotificationView GCDiscreetNotificationView is a discreet, non-modal, notification view fo ...

  6. Linux 文件的读写执行权限的说明

    文件的读写执行权限的说明 X 进入目录的权限: cd 1.文件本身是可执行的 2.普通用户还具备r的权限 3.root用户只需要有r的权限即可 r 查看目录/文件的内容 :ls dir 没有读的权 限 ...

  7. Hadoop HBase概念学习系列之HFile（二十）

    HFile文件是不定长的. HFile里才是想要的真正数据,实际存储的位置,是在HDFS上.

  8. mvc, web mvc, spring web mvc 区别

    1. MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用于组织代码用一种业务逻辑和数据显示分离的 ...

  9. python处理数据（二）

    处理PDF文件 PyPDF2简介 作为 PDF 工具包构建的纯 python 库. 它可以:提取文档信息(标题,作者,... ...)一页一页地分割文件一页一页地合并文件裁剪页面将多个页面合并成一个页 ...

  10. Hadoop HA on Yarn——集群启动

    这里分两部分,第一部分是NameNode HA,第二部分是ResourceManager HA (ResourceManager HA是hadoop-2.4.1之后加上的) NameNode HA 1 ...