Vue表单输入绑定(文本框和复选框)
文本框
<!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表单输入绑定(文本框和复选框)的更多相关文章
- Vue表单输入绑定
<h3>基础用法</h3> <p>你可以用<strong>v-model</strong>指令在表单input,textarea以及sele ...
- vue 表单输入绑定 checkbox
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- 前端框架之Vue(8)-表单输入绑定
基础用法 你可以用 v-model 指令在表单 <input> . <textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...
- vue基础——表单输入绑定
一.基础用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选择正确的方法来更新元素. 尽管有些神 ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- vue 表单输入与绑定 v-model
vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...
- vue基础---表单输入绑定
[一]基础用法 用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
随机推荐
- 理解JVM之垃圾收集器详解
前言 垃圾收集器作为内存回收的具体表现,Java虚拟机规范并未对垃圾收集器的实现做规定,因而不同版本的虚拟机有很大区别,因而我们在这里主要讨论基于Sun HotSpot虚拟机1.6版本Update22 ...
- 你不知道的JavasScript上篇·第五章·原型·下
5.差异继承 继承意味着复制操作: 差异继承: 基本原则是在描述对象行为时,使用其不同于普遍描述的特制. (我的理解是只用对象自身的而不用普遍继承的像是toString(),valueOf()这种方法 ...
- Codeforces Round #545 (Div. 1) 简要题解
这里没有翻译 Codeforces Round #545 (Div. 1) T1 对于每行每列分别离散化,求出大于这个位置的数字的个数即可. # include <bits/stdc++.h&g ...
- Spring AOP 中@Pointcut的用法
Spring Aop中@pointCut的用法,格式:execution(modifiers-pattern? ret-type-pattern declaring-type-pattern? nam ...
- 论各类BI工具的“大数据”特性!
市面上的BI工具形形色色,功能性能包装得十分亮丽,但实际应用中我们往往更关注的是朴实的技术特性和解决方案.对于大数据,未来的应用趋势不可抵挡,很多企业也正存在大数据分析处理展现的需求,以下我们列举市面 ...
- KCF的弊端
一.前情提要 如果你对目标跟踪和KCF是什么东西还不了解的话欢迎你看前一篇博文KCF入门详解:https://www.cnblogs.com/jins-note/p/10215511.html ...
- Nginx基本的安全优化
为了防止nginx出现软件漏洞,我们要对nginx软件服务加强一些安全性,下面就介绍一下基本的安全优化 1.隐藏nginx版本号: 想要隐藏,首先我们要了解所使用软件的版本号,我们可以在Linux中查 ...
- LeetCode题解之Convert BST to Greater Tree
1.题目描述 2.问题分析 使用一个vector将所有节点的值以升序排列.然后比较,求和,加上. 3.代码 TreeNode* convertBST(TreeNode* root) { if (roo ...
- PHP用正则匹配字符串中的特殊字符防SQL注入
本文出至:新太潮流网络博客 /** * [用正则匹配字符串中的特殊字符] * @E-mial wuliqiang_aa@163.com * @TIME 2017-04-07 * @WEB http:/ ...
- 通过HTTP参数污染绕过WAF拦截 (转)
上个星期我被邀请组队去参加一个由CSAW组织的CTF夺旗比赛.因为老婆孩子的缘故,我只能挑一个与Web漏洞利用相关的题目,名字叫做”HorceForce”.这道题价值300点.这道题大概的背景是,你拥 ...