文本框

<!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. Warning：java：资源1.5已过时，将在未来所有发行版中删除

    idea运行提示错误信息:![](http://luzhiming.top/zb_users/upload/2018/10/201810132314159180803.png)解决办法如下:第一步![ ...

  2. WebSerivce与WebAPI的区别

    一.什么是Web Service Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据Web Service规范实施的应 ...

  3. canvas绘画交叉波浪

    做个记录,自己写的动态效果,可能以后用的着呢: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  4. css3之transform属性实现div不定宽高垂直水平居中

    transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...

  5. C3p0 的一个异常

    转的,异常如下: NewPooledConnection - com.mchange.v2.c3p0.impl.NewPooledConnection@1285252 closed by a clie ...

  6. JS--我发现，原来你是这样的JS（引用类型不简单[下篇]，基本包装类型与个体内置对象）

    一.介绍 本篇是续上一篇的,引用类型的下篇,本篇主要是说基本包装类型和个体内置对象.如果你能收获一些知识,那我很高兴,很满足,哈哈哈,希望大家能愉快看完.如果你想学好一门技术,要不忘初心,方得始终. ...

  7. tilestache + mbutil应用

    1. 安装pip. 我们同样需要在Python的官网上去下载,下载地址是: https://pypi.python.org/pypi/pip#downloads 2. 解压. 解压pip-9.0.1. ...

  8. 关于通过ServletContext获取数据出现的http500的错误的解决方案

    1.问题的简述 我创建了一个两个servlet以及一个jsp页面,假定给两个servlet分别命名(初始化数据servlet)和(数据处理servlet),jsp页面用于传递数据至数据处理servle ...

  9. LINQ学习：Select的用法

    转载于:http://www.cnblogs.com/ForEvErNoME/archive/2012/07/25/2606659.html 说明:在查询表达式中,select 子句可以指定将在执行查 ...

  10. Oracle 与 mysql 建立透明网关

    1.1.1.   文档编写目的 项目上需要做与Mysql数据库的对接,然而Oracle与Mysql数据库是异构的,因此这里采用透明网关的方式来解决. 另,项目上的环境为APP:12.2.6 ; DB: ...