文本框

<!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. HDU1814(2-SAT)

    Peaceful Commission Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  2. vue中的js引入图片，必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  3. python学习之老男孩python全栈第九期_day004知识点总结

    1. 列表list: 列表转换成字符串: s = 'kidd' s1 = '_'.join(s) # 用_连接 字符串转换成列表: split() range(头,尾,步长): [0,1,2,3,4, ...

  4. JS 闭包 p5

    终于到闭包了,写了一晚上,好激动: 首先闭包,个人是这样理解的(比较好记):闭包是一种能力,是一种可以访问内部函数作用域的能力或者说是一种行使权力,一旦你拥有这个能力,你将可以访问内部函数的作用域.

  5. js-ES6学习笔记-Class（5）

    1.原生构造函数会忽略apply方法传入的this,也就是说,原生构造函数的this无法绑定,导致拿不到内部属性.比如,Array构造函数有一个内部属性[[DefineOwnProperty]],用来 ...

  6. CSS隐藏多余的文字

    效果: <p><strong>商品名称:</strong>新鲜现摘云南绥江半边红李子甜脆脱骨李6斤当季绿色有机水果包邮</p></div> ...

  7. bootstrap datetimepicker日期插件美化

    效果 https://segmentfault.com/img/bVbieIp?w=1029&h=461 原文链接:https://segmentfault.com/a/11900000167 ...

  8. 没有想到speex还在持续的更新

    听说微信改用了speex, 于是今天访问了speex网站: http://www.speex.org/ 发现从08年的Speex 1.2rc1之后,在2014年12月份和2015年1月份更新了两次 根 ...

  9. Android Studio离线打包5+SDK

    dcloud官网下载最新版5+SDK 解压后,Android Studio导入HBuilder-Hello,选择From eclispe 修改assets/data/dcloud_control.xm ...

  10. Android IOC注解库EasyUI

    EasyUI介绍 1.使用反射机制和注解实现类似于butterknife的IOC框架 2.快速的findViewById和OnClick 3.扩展了click时无网络监测 4.扩展了快速点击监测 使用 ...