文本框

<!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>

转载于:https://www.cnblogs.com/wangshuang123/p/10777738.html

Vue表单输入绑定（文本框和复选框）相关推荐

  1. Vue表单输入绑定(元婴中期)

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

  2. 解决AJAX表单用POST方式提交Checkbox复选框的问题

    用AJAX的POST方式提交表单,函数如下: function createXMLHttp() { var xmlhttp = false; try { xmlhttp = new ActiveXOb ...

  3. 9.Vue 表单输入绑定

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

  4. Vue.js 表单输入绑定

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

  5. Vue学习笔记(六) 表单输入绑定

    v-model 指令在表单元素上创建双向数据绑定,它负责用于监听用户输入事件以更新数据 注意,v-model 会忽略所有表单元素特性的初始值,而总是将 Vue 实例的数据作为数据来源 1.输入框 &l ...

  6. uniapp 输入法画面_表单输入绑定 · uni-app跨平台移动应用开发 · 看云

    # 表单输入绑定 ## [基础用法](https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95 &qu ...

  7. Vue007_ 表单输入绑定

    表单输入绑定 使用 v-model  对表单数据自动收集 1) text/textarea 2) checkbox 3) radio 4) select <!DOCTYPE html> & ...

  8. java pdf表单域实现_Java 创建PDF表单域 - 文本框、复选框、列表框、组合框、按钮等...

    表单域包括文本框.复选框.列表框.组合框.按钮和签名域等,主要用于收集用户填写或选择的数据.这篇文章将介绍如何在Java应用程序中给PDF文档添加表单域. 导入jar文件 本文所使用的PDF类库是Fr ...

  9. form表单注意点合集（文本域、单选框、复选框、下拉框等）

    .html <form action="#" target="_blank">账号:<input type="text" ...

最新文章

  1. c语言修改elf文件crc32,hash/crc32
  2. vSphere PowerCLI安装及命令
  3. 9.NoSQL数据库第1部分
  4. Go web 编程资源
  5. 数据的设计命名的十个要点
  6. 计算机免修考试题库,计算机免修考试内容和样卷.doc
  7. react native多语言_前端福音：为什么使用 React 和 SVG 开发图形 UI 是天作之合？
  8. [转]mysql免安装版配置
  9. 英雄由此诞生------直击微软2008发布大会
  10. ajax fetch api,fetch 简介: 新一代 Ajax API
  11. Shell定时删除日志
  12. 会员分享几个平时看榜单常去的网站
  13. 计算机二级考试vb内容,计算机二级VB考试考什么内容？（一）
  14. AST2500用户添加自定义IPMI交互命令
  15. 2014年美国大学生数学建模竞赛翻译及建模思路
  16. feignclient time out
  17. 林书豪055-阿联德比
  18. requestLayout() improperly called by android.widget.GridView{43cefbd VFED.VC.. .F...... 0,0-2190,319
  19. 本专栏所有力扣题目的目录链接, 刷算法题目的顺序(由易到难/面试频率)/注意点/技巧, 以及思维导图源文件问题(持续更新中)
  20. 基于retinex理论改进的低照度图像增强算法

热门文章

  1. JavaScript-this指向问题
  2. 造兵三国的服务器要维护多久,FAQ_造兵三国_九游手机游戏
  3. android休眠 wifi 断流,WiFi断流算什么！安卓8.0曝出重大bug，严重多了
  4. linux 命令美丽,美丽的程序猿-Linux下那些查找文件的小技巧-find
  5. 【java笔记】接口的定义，接口的使用
  6. 【java笔记】scanner类和匿名对象的使用
  7. android 程序必须有界面,Android开发之开机启动没有界面的应用程序
  8. 如何运行wifi服务器,技术：如何通过wifi进行文件传输？
  9. 清明节，如何用代码让网页变灰
  10. 【ZJOI2009】【BZOJ1432】Function（找规律）