<!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. 【剑指Offer】05、用两个栈实现队列

    题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 题解一: //stack2有元素就pop,没有元素就将stack1中所有元素倒进来再pop public ...

  2. Chrome 插件 postman 可以在线post

    地址:https://chrome.google.com/webstore/detail/fhbjgbiflinjbdggehcddcbncdddomop

  3. Redis入门-02-CentOS7环境搭建

    CentOS7下redis安装过程,安装后需要开启端口号6379 #下载 wget http://download.redis.io/releases/redis-3.2.4.tar.gz #解压 t ...

  4. Certificate Request Processor: Invalid provider specified. 0x80090013 (-2146893805 NTE_BAD_PROVIDER)

    通过INF文件创建CSR时遇到Certificate Request Processor: Invalid provider specified. 0x80090013 (-2146893805 NT ...

  5. PAT (Advanced Level) Practice 1120 Friend Numbers (20 分) （set）

    Two integers are called "friend numbers" if they share the same sum of their digits, and t ...

  6. Wannafly Camp 2020 Day 2B 萨博的方程式 - 数位dp

    给定 \(n\) 个数 \(m_i\),求 \((x_1,x_2,...,x_n)\) 的个数,使得 \(x_1 \ xor\ x_2\ xor\ ...\ xor\ x_n = k\),且 \(0 ...

  7. layui的跳转链接实现分页low

    layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage ,layer = layui.layer; laypag ...

  8. 2级搭建类201-Oracle 12cR2 单实例 ASM（OEL7.7）公开

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列除特定项目目前不对外发布,仅作为博客记录,其他公开.如学员在 ...

  9. Burp Suite Professional 针对APP抓包篡改数据提交【安全】

    Burp Suite 是用于攻击web 应用程序的集成平台,包含了许多工具.Burp Suite为这些工具设计了许多接口,以加快攻击应用程序的过程.所有工具都共享一个请求,并能处理对应的HTTP 消息 ...

  10. Hackme.inndy -> Onepunch

    Onepunch 这个题的想法必须得称妙了,需要对以往简单的认知进行一定的颠覆.特殊性在于程序的代码段(0x401000)具有写权限 1.通过修改程序代码段控制程序流程 程序中只能对任意一个字节改写一 ...