文本框

<!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. Java Spring学习笔记----Bean的依赖注入（设值注入方式）1

    Spring常用的两种依赖注入方式:一种是设值注入方式,利用Bean的setter方法设置Bean的属性值:另一种是构造注入,通过给Bean的构造方法传递参数来实现Bean的属性赋值: 1.设值注入方 ...

  2. HDU6152

    Friend-Graph Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  3. 从零开始学习html（十五）css样式设置小技巧——下

    六.垂直居中-父元素高度确定的单行文本 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&quo ...

  4. span元素文字自动换行

    <span>加上display:inline-block,成功实现了想要的效果.但又有一个问题,纯连续字母和数字不会换行,最后加上word-wrap: break-word强制自动换行搞定 ...

  5. 墨卡托投影、地理坐标系、地面分辨率、地图比例尺、Bing Maps Tile System

    GIS理论(墨卡托投影.地理坐标系.地面分辨率.地图比例尺.Bing Maps Tile System) 墨卡托投影(Mercator Projection),又名"等角正轴圆柱投影&quo ...

  6. Flutter Dart中的异步

    以下内容从官网得到: https://webdev.dartlang.org/articles/performance/event-loop Even-Looper Dart是单线程模型,也就没有了所 ...

  7. Spring Boot系列学习文章(二) -- 配置多数据源

    前言: 在上一章中,我们已经搭建好项目,现在来讲一下如何配置数据源. 由于在有的项目中,用的数据源可能会涉及多个,且是不同类型的,我们接下来就讲解多数据源的配置. 情景描述: 现有项目需要访问不同的数 ...

  8. 【jdk源码1】TreeMap源码学习

    这是看过的第一个jdk源码(从立下目标以来):TreeMap.说实话断断续续的看了有好几天了,我觉得我犯了一个错误,就像一开始说的那样,我打算完完全全看懂TreeMap关于红黑树的实现方式,后来我想了 ...

  9. Mongodb集群与分片 1

    分片集群   Mongodb中数据分片叫做chunk,它是一个Collection中的一个连续的数据记录,但是它有一个大小限制,不可以超过200M,如果超出产生新的分片.   下面是一个简单的分片集群 ...

  10. Windows Server 2012无法安装 .NET3.5-安装角色或功能失败，找不到源文件

    新服务器搭建环境总是有很多问题.在安装MS SQL SERVER 2014 EXPRESS的时候提示无法安装成功,需要先安装 .NET Framework 3.5!但是新问题又来了,使用Windows ...