<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>

<div id="app">

    <input type="text" v-model="value"> <!-- 双向绑定，输入实时绑定 -->

    <input type="text" v-model.lazy="value"> <!-- 懒加载，输入完毕才加载 -->

    <input type="text" v-model.trim="value"> <!-- 修饰符，去除首位空格 -->

    <input type="text" v-model.number="value"> <!-- 修饰符，数字input -->

    <h1>{{value}}</h1>

    <!-- 原理刨析，单向绑定实现双向绑定 -->

    <input type="text" :value="message" @input="valChange"> <!-- @input : 输入事件 -->

    <h1>{{message}}</h1>

    <!-- radio运用 -->

    <label for="male">

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

    </label>

    <label for="female">

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

    </label>

    <h1>性别：{{sex}}</h1>

    <!-- checkbox单选框运用 -->

    <label for="agree">

        <input type="checkbox" id="agree" v-model="isAgrees">同意协议

    </label>

    <button :disabled="!isAgrees">下一步</button>

    <!-- checkbox多选框运用 -->

    <div>

        <label v-for="(item,i) in hobbies_all">

        <input type="checkbox" v-model="hobbies" :value="item">{{item}}

        </label>

    </div>

    <h1>你的爱好{{hobbies}}</h1>

    <!-- select运用 -->

    <select name="" id="" v-model="area">

        <option value="江西">江西</option>

        <option value="湖北">湖北</option>

    </select>

    <h1>你的地区：{{area}}</h1>

</div>

</body>

<script>

    /*

        v-model 表单绑定

    */

    const app = new Vue({

        el : "#app",

        data : {

            value : "123",

            message : "msg",

            sex : "男",

            isAgrees : false,

            hobbies_all : ["篮球","足球","乒乓球"],

            hobbies : [],

            area : "江西"

        },

        methods : {

            valChange : function(event){

                // 通过事件获取输入的值

                let val = event.target.value;

                // 绑定

                this.message = val;

            }

        }

    });

</script>

</html>

vue -- v-model 表单绑定的更多相关文章

  1. Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  2. vue基础-动态样式&表单绑定&vue响应式原理

    动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...

  3. 【VUE】3.表单操作

    1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...

  4. 用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。

    Vue3 的父子组件传值.绑定表单数据.UI库的二次封装.防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法. 基础使用方法 Vue3对于表单的绑定提供了一 ...

  5. Spirng MVC +Velocity 表单绑定命令对象

    通常,表单中的数据在提交之后可以通过Spring MVC的@RequestParam注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...

  6. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  7. Vue+Element-Ui 异步表单效验

    简单的效验 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名 /* ruleForm :表单绑定的数 ...

  8. Knockout学习之表单绑定器（上）

    表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然 ...

  9. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. java 相关书籍介绍

    自己做开发也有两年多了吧,其中也关注过许多大牛的博客,买过许多的书看. 自己也是个比较爱阅读的人,从小的时候被老爸逼着每次寒暑假看书,到后来慢慢长大爱上了阅读,习惯了看书. 农村的小孩吗,那时候又不像 ...

  2. Nginx配置HTTPS并将HTTP请求重定向到HTTPS

    个人博客 地址:https://www.wenhaofan.com/a/20190702214652 在阿里云获取免费的HTTPS证书 配置HTTPS之前首先需要拥有HTTPS证书,在阿里云可以获得域 ...

  3. BFS和队列

    深度优先搜索(DFS)和广度优先搜索(BFS)是基本的暴力技术,常用于解决图.树的遍历问题. 首先考虑算法思路.以老鼠走迷宫为例: (1):一只老鼠走迷宫.它在每个路口都选择先走右边,直到碰壁无法继续 ...

  4. codechef Future of draughts

    难度 super-hard 题意 官方中文题意 做法 定义1:\(G\)为邻接矩阵,\(I\)为单位矩阵 定义2:\(H\)为转移矩阵,可以不动,即\(H=G+I\) 定义3:\(e_i(x_1,.. ...

  5. LeetCode 836. 矩形重叠

    题目链接:https://leetcode-cn.com/problems/rectangle-overlap/ 矩形以列表 [x1, y1, x2, y2] 的形式表示,其中 (x1, y1) 为左 ...

  6. 06-SV随机化

    1.受约束的随机测试法(CRT) 随着设计变得越来越大,要产生一个完整的激励集来测试设计的功能变得越来越困难.解决的办法是采用受约束的随机测试法自动产生测试集.CRT环境比定向测试的环境复杂,不仅需要 ...

  7. 百度地图根据list经纬度算每个点到剩余点的平均距离、最远距离和最近距离

    一.使用步骤 说明:给你一大串坐标list.计算每个点到其他所有点的最近最远平均距离. 1.打开百度地图api在线demo(随便一个都行) 2.替换<script></script& ...

  8. Docker安装部署es集群

    Docker安装部署es集群:环境准备:已安装docker的centos服务器一台1． 拉取es版本docker pull elasticsearch:5.6.82． 新建文件夹 数据挂载目录 和 配 ...

  9. 在linux中安装nginx

    linux系统安装在vmware中,首先在主机中利用shell工具与虚拟机连接 1.在linux中查看虚拟机的ip地址 在终端输入 ifconfig 红框里面就是ip地址 2.在主机中打开shell工 ...

  10. DBeaver下载驱动文件失败

    今天首次使用DBeaver软件链接数据库时会进行下载驱动文件,例如如下图所示: 在上图中显示了下载驱动文件失败,提示“无法解决库文件,请检查网络设置”.其实,是可以正常上网的,可能是公司内网的限制,或 ...