<!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. sbt package报错：a bytes-like object is required, not 'str'

    Traceback (most recent call last): File , in <module> s.sendall(content) TypeError: a bytes-li ...

  2. 开发分支管理模型之阿里AoneFlow

    说到分支管理模型,令人最为熟悉的莫过于TrunkBased 和 GitFlow. TrunkBased 模型是持续集成思想所崇尚的工作方式,它由单个master分支和许多release分支组成,每个r ...

  3. php 获取当前目录和当前文件夹

    <?php /** * PHP获取路径或目录实现 */ //魔术变量,获取当前文件的绝对路径 echo "__FILE__: ========> ".__FILE__; ...

  4. JavaSE学习笔记（3）---面向对象三大特性

    JavaSE学习笔记(3)---面向对象三大特性 面向对象的三大特征:继承.封装.多态 1.封装 面向对象编程语言是对客观世界的模拟,客观世界里成员变量都是隐藏在对象内部的,外界无法直接操作和修改.然 ...

  5. Spark学习之路 （十八）SparkSQL简单使用[转]

    SparkSQL的进化之路 1.0以前: Shark 1.1.x开始: SparkSQL(只是测试性的) SQL 1.3.x: SparkSQL(正式版本)+Dataframe 1.5.x: Spar ...

  6. 查看whl包名是否满足系统的条件的命令，以此解决whl包出现“is not a supported wheel on this platform”错误提示的问题

    在Ubuntu系统中,使用pip安装whl包时,常常会报如下错误: tensorflow_gpu-1.11.0-cp35-cp35m-manylinux1_x86_64.whl is not a su ...

  7. java学习笔记之反射—反射和工厂模式

    简单工厂模式又称为静态工厂方法模式,它是由工厂对象来决定要创建哪一种类的实例化对象. 静态工厂代码: class Factory{ private Factory() {} public static ...

  8. selenimu--find_element_by_css_selector()方法汇总

    一.单一属性定位 type selector driver.find_element_by_css_selector('input') id 定位 driver.find_element_by_css ...

  9. C 基础 _Generic 泛型应用

    引言 - _Generic 用法简介 #include <stdio.h> #define TYPENAME_CASE(type) \ type: #type, #define TYPEN ...

  10. 图灵，咕泡，鲁班学院--Java高级架构师-互联网企业级实战VIP课程(价值6380)

    课程介绍:        讲课内容涉及Java互联网技术工程框架.应用框架.        性能调优 (Tomcat Nginx JVM)         分布式框架(并发编程 Zookeeper N ...