Vue2.0 【第一季】 第6节 v-model指令

第6节 v-model指令

v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。

一、一个最简单的双向数据绑定代码：

html文件：

<div id="app">

    <p>原始文本信息：{{message}}</p>

    <h3>文本框</h3>

    <p>v-model:<input type="text" v-model="message"></p>

</div>

js代码：

var app=new Vue({

  el:'#app',

  data:{

       message:'hello Vue!'

  }

 })

完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>v-model 实例</title>

    <script type="text/javascript" src="../assets/js/vue.js"></script>

</head>

    <body>

        <h1>v-model 实例</h1>

        <hr>

        <div id="app">

            <p>原始文本信息：{{message}}</p>

            <h3>文本框</h3>

            <p>v-model:<input type="text" v-model="message"></p>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    message:'hello Vue!'

                }

            })

        </script>

    </body>

</html>

看一下浏览器效果：

二、修饰符

  • .lazy：取代 input 监听 change 事件。
  • .number：输入字符串转为数字。
  • .trim：输入去掉首尾空格。

完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>v-model 实例</title>

    <script type="text/javascript" src="../assets/js/vue.js"></script>

</head>

    <body>

        <h1>v-model 实例</h1>

        <hr>

        <div id="app">

            <p>原始文本信息：{{message}}</p>

            <h3>文本框</h3>

            <p>v-model：<input type="text" v-model="message"></p>

            <p>v-model.lazy：<input type="text" v-model.lazy="message"></p>

            <p>v-model.number：<input type="text" v-model.number="message"></p>

            <p>v-model.trim：<input type="text" v-model.trim="message"></p>

            <!-- 去空格 -->

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    message:'hello Vue!'

                }

            })

        </script>

    </body>

</html>

** .lazy**浏览器效果：

点击输入文本框外的地方：

** .number**浏览器效果：

但有一种例外情况：

** .trim**浏览器效果：

三、文本区域加入数据绑定

html代码：

<textarea cols="30" rows="10" v-model="message"></textarea>

浏览器效果：

四、多选按钮绑定一个值

html代码：

<h3>多选框绑定一个值</h3>

<input type="checkbox" id="isTrue" v-model="isTrue">

<label for="isTrue">{{isTrue}}</label>

js代码：

var app = new Vue({

	el:'#app',

    data:{

        isTrue:true

    }

})

浏览器效果：

五、多选绑定一个数组

html代码：

<h3>多选绑定一个数组</h3>

<p>

	<input type="checkbox" id="Da0sy" value="Da0sy" v-model="web_Names">

	<label for="Da0sy">Da0sy</label><br/>

	<input type="checkbox" id="Daisy" value="Daisy" v-model="web_Names">

	<label for="Daisy">Daisy</label><br/>

	<input type="checkbox" id="Coisini" value="Coisini" v-model="web_Names">

	<label for="Coisini">Coisini</label><!--这里的label for表示与id为多少的表单元素绑定-->

<p>{{web_Names}}</p>

</p>

浏览器效果：

六、单选按钮绑定数据

html代码：

<h3>单选按钮绑定</h3>

<input type="radio" id="one" value="男" v-model="sex">

<label for="one">男</label>

<input type="radio" id="two" value="女" v-model="sex">

<label for="one">女</label>

<p>{{sex}}</p>

js代码：

var app = new Vue({

	el:'#app',

		data:{

			sex:'男'

		}

})

浏览器效果：

Vue2.0 【第一季】第6节 v-model指令的更多相关文章

  1. 分布式压测系列之Jmeter4.0第一季

    1)Jmeter4.0介绍 jmeter是个纯java编写的开源压测工具,apache旗下的开源软件,一开始是设计为web测试的软件,由于发展迅猛,现在可以压测许多协议比如:http.https.so ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  3. VUE2.0增删改查附编辑添加model(弹框)组件共用

    Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue- ...

  4. Vue2.0 【第一季】第8节 v-pre & v-cloak & v-once

    目录 Vue2.0 [第一季] 第8节 v-pre & v-cloak & v-once v-pre 指令 v-cloak 指令 v-once 指令 Vue2.0 [第一季] 第8节 ...

  5. Vue2.0 【第一季】第7节 v-bind指令

    目录 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v-bind缩写 绑定CSS样式 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v- ...

  6. Vue2.0 【第一季】第5节 v-on：绑定事件监听器

    目录 Vue2.0 [第一季] 第5节 v-on:绑定事件监听器 第五节 v-on:绑定事件监听器 一.使用绑定事件监听器,编写一个加分减分的程序. Vue2.0 [第一季] 第5节 v-on:绑定事 ...

  7. Vue2.0 【第一季】第4节 v-text & v-html

    目录 Vue2.0 [第一季]第4节 v-text & v-html 第四节 v-text & v-html Vue2.0 [第一季]第4节 v-text & v-html 第 ...

  8. Vue2.0 【第一季】第3节 v-for指令：解决模板循环问题

    目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...

  9. Vue2.0 【第一季】第2节 v-if v-else v-show 指令

    目录 Vue2.0 [第一季]第2节 v-if v-else v-show 指令 第二节 v-if v-else v-show 指令 2.1 v-if指令.v-else指令: 2.2 v-show的使 ...

随机推荐

  1. abrupt|promising

    N-VAR 典礼;(宗教)仪式A ritual is a religious service or other ceremony which involves a series of actions ...

  2. 对《java程序员上班那点事》笔者对数组占用内存质疑

    1.<java程序员上班那点事>笔者对数组占用内存的描述 2.实际测试情况: /** * 测试一维数组占用内存 */ public static void testOneArray() { ...

  3. <JZOJ5944>信标

    emmm树形dp?好像是的 搬一个题解证明过来 由于在n>1时答案至少为1,我们枚举一个必须放的根, 所有深度不同的点就被区分开了. 设一个节点有c个儿子, 发现必须在其中至少c−1个儿子的子树 ...

  4. jenkins发布项目到远程主机上，配置linux使用SSH免密码登录

    一.首先要配置两台linux如何使用SSH免密码登录,这样脚本执行scp命令以及远程执行脚本都不需要输入密码: A为本地主机(即用于控制其他主机的机器,jenkins服务器) ; B为远程主机(即被控 ...

  5. [BZOJ 3144][HNOI 2013] 切糕

    题目大意 切糕是 (p times q times r) 的长方体,每个点有一个违和感 (v_{x, y, z}).先要水平切开切糕(即对于每个纵轴,切面与其有且只有一个交点),要求水平上相邻两点的切 ...

  6. Python字符串编码——Unicode

    ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte).也就是 ...

  7. fastcgi_param详解

    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;#脚本文件请求的路径 fastcgi_param QUERY_STRI ...

  8. jQuery学习笔记二

    事件监听者是DOM的一部分,任何页面都可以增加事件监听者.浏览器利用事件监听者监视页面上做了什么,然后告诉Javascript解释器是否需要采取行动.如:$('#showMessage').click ...

  9. php获取远程图片并把它保存到本地

    /* *功能:php多种方式完美实现下载远程图片保存到本地 *参数:文件url,保存文件名称,使用的下载方式 *当保存文件名称为空时则使用远程文件原来的名称 */ function getImage( ...

  10. JSON parse error: Cannot deserialize value of type `java.util.Date` from String

    DateTimePicker + @DateTimeFormat("yyyy-MM-dd HH:mm:ss")日期格式转换异常 最近在做的一个项目使用的日期格式是yyyy-MM-d ...