文本框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单输入绑定</title>
    </head>
    <body>

<div id='app'>
            <!-- 文本框 -->
            <label>姓名是:</label>
            <input v-model="message1" placeholder="请输入" />

<!-- 多行文本 -->
            <p>多行文本</p>
            <textarea v-model="message2" placeholder="多行文本"></textarea>
            </div>
        </div>

<script src="vue.js"></script>
        <script>
            var app1 = new Vue({
                el: "#app",
                data: {
                    message1: '又又',
                    message2: '1234567890987654321'
                }
            });
        </script>
    </body>
</html>
复选框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复选框</title>
    </head>
    <body>
        <div id="app">
            <!-- 单个复选框，绑定到boolean值 -->
            <!--for属性规定与那个input进行绑定 -->
            <input type="checkbox" v-model="checked" id="check" />
            <label for="checkbox">{{checked}}</label>

</div>

<div id="app1">
            <!-- 多个复选框，绑定同一个数组 -->
            <input type="checkbox" v-model="item" id="check1" value="复选框1" />
            <label>复选框1</label>
            <input type="checkbox" v-model="item" id="check2" value="复选框2"/>
            <label>复选框2</label>
            <input type="checkbox" v-model="item" id="check3" value="复选框3"/>
            <label>复选框3</label>
            <input type="checkbox" v-model="item" id="check4" value="复选框4"/>
            <label>复选框4</label>
            </br>
            <p>所选中：
                <span>{{item}}</span>
</p>
            
            
        </div>

<script src="vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    checked: "true"
                },
                model: {
                    checkbox: function() {
                        this.checked = (this.checked == 'true') ? 'false' : 'true';
                    }
                }
            });

var app1 = new Vue({
                el: "#app1",
                data: {
                    item:[]
                }
            })
        </script>
    </body>
</html>

Vue表单输入绑定（文本框和复选框）的更多相关文章

  1. Vue表单输入绑定

    <h3>基础用法</h3> <p>你可以用<strong>v-model</strong>指令在表单input,textarea以及sele ...

  2. vue 表单输入绑定 checkbox

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

  3. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  4. 前端框架之Vue(8)-表单输入绑定

    基础用法 你可以用 v-model 指令在表单 <input> . <textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...

  5. vue基础——表单输入绑定

    一.基础用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选择正确的方法来更新元素. 尽管有些神 ...

  6. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  7. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...

  8. vue基础---表单输入绑定

    [一]基础用法 用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...

  9. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

随机推荐

  1. Linux常用基本命令[cp]

    cp:复制文件或者目录 用法格式: cp [option] [source] [dest] cp [选项] [源文件] [目标文件] >用root账户,创建文件,复制文件 root@dev:/h ...

  2. 设计模式(11)--Flyweight(享元模式)--结构型

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.模式定义: 享元模式是对象的结构模式.享元模式以共享的方式高效地支持大量的细粒度对象. 2.模式特点: 享元模 ...

  3. avalonjs 实现简单购物车

    因为最近有在做购物车,然后我们是用avalon来实现一些模块的,所以顺其自然的用avalon来实现购物车,目前发现avalon还是比较强大的,大大的节约了代码量. 购物车一般具备的功能是加减数量.选择 ...

  4. 微信公众号获取acess_token并存储（php）

    <?php define("appid", "你的appid"); define("appsecret", "你的appse ...

  5. 【读书笔记】iOS-定位服务与地图应用开发

    一,定位服务. iOS设备能提供3种不同的定位途径: 1,WiFi定位,通过查询一个WiFi路由器的地理位置的信息,比较省电:iPhone,Ipod touch 和iPad都可以. 2,蜂窝式移动电话 ...

  6. mac下/usr/local/bin No such file or directory问题解决

    在对composer进行全局配置时,执行 sudo mv composer.phar /usr/local/bin/composer 时,mac报错:/usr/local/bin No such fi ...

  7. T-SQL的timestamp类型实际应用

    目录 0x00 适用场景 0x01 问题描述 0x02 字节数组 0x03 Base64编码 0x04 其实没那么麻烦 0x05 回顾 0x00 适用场景 1. 前端: JavaScript 2. 后 ...

  8. java 使用 引用数据类型（以Scanner、Random模块为例）

    创建一个新变量 类型 变量名 = new 类型() 举个例子: Scanner sc = new Scaner() 使用引用数据类型中的功能: 变量.功能名字() Scanner类:接受键盘输入 1. ...

  9. 从零自学Java-4.使用字符串来交流

    1.使用字符串来存储文本: 2.在程序中显示字符串: 3.在字符串中包含特殊的字符: 4.拼接字符串: 5.在字符串中包含变量: 6.比较字符串: 7.判断字符串的长度: 程序Credits:显示一部 ...

  10. Mac逆向--思维导图