Vue样式绑定、事件绑定
1.样式绑定
1.1class类标签绑定
<p :class="对象">
<p :class="数组">
<p :class="{类名:true/false, 类名:true/false}">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue class标签绑定操作</title>
<style>
.item {
width: 600px;
padding: 10px;
border: 1px solid #ccc;
}
.current {
border-color:red;
}
.active {
border-color:green;
}
</style>
</head>
<body>
<div id="app">
<h1>样式操作</h1>
<hr> <!--calss第一种绑定 :class='对象' -->
<p class="item" :class="cname"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.</p>
<!--就类似于 ：class="{current:cname}" 里面都是对象-->
<!-- <p class="item" :class="{current:cname}"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.</p> --> <!--calss第二种绑定:class="{类名:true/false, 类名:true/false}">-->
<p class="item" :class="{current:isCurrent, active:true, link:true, 'li-item':true}"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.</p> <!--可以统一将对象用一个属性，直接调用属性去完成对样式的修改-->
<p :class="classObj">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor provident officia facilis ipsam nisi doloribus earum ratione dolorem, minus, suscipit, magnam beatae. Magni dolor similique, a molestias neque officiis animi?</p> <!--class第三种绑定 :class="数组"-->
<p :class="classList">Lorem ipsum dolor sit amet.</p>
</div> <script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
cname:'curret', //<p class="item" :class="cname">
// cname:true, //<p class="item" :class="{current:cname}">
isCurrent: false, classObj: {item:true, link:true,active:true},
classList: ['link', 'item'] //数组
}
});
</script>
</body>
</html>
1.2 style样式绑定
<p :style="{color:'值', background:'值'}">
<p :style="[{}, {}, {}]">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Style样式绑定</title>
<style>
p {
border:1px solid #ccc;
width: 700px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<h1>Style绑定</h1> <p :style="styleValue">Lorem ipsum dolor sit amet.</p>
<!--<p :style="{color:'值', background:'值'}">-->
<p :style="{color:'purple', background:'pink'}">Lorem ipsum dolor sit amet.</p>
<p :style="styleObj">Lorem ipsum dolor sit amet.</p>
<!--<p :style="[{对象1}, {对象2}, {}]">-->
<p :style="[styleObj, {borderWidth:'2px'}]">Lorem ipsum dolor sit amet.</p>
</div> <script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
styleValue: 'color:red;background:green',
styleObj: {color:'pink',background:'#ccc', transform:'translate(0, 0)'}
}
});
</script>
</body>
</html>
2 事件
2.1 事件绑定
<p @事件名="方法"> 简写的方式
<p v-on:事件名="方法">
方法加 () 的问题
<p @事件名="方法(1,1,2,3,$event)">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 事件</title>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
</head>
<body>
<div id="app" class="container">
<div class="page-header">
<h1>Vue 事件</h1>
</div> <div class="row">
<div class="col-md-12">
<button @click="counter ++" class="btn btn-default"> +1 </button>
<button @click="addCounter(1)" class="btn btn-default"> +1 </button>
<button @click="addCounter(10)" class="btn btn-default"> +10 </button> <hr> <p class="info">
{{counter}}
</p> <hr> <div class="alert alert-info" @mousemove="onMoveFn">
Lorem ipsum dolor sit amet.
</div> <!--绑定对象同时后面还可以加参数-->
<div class="alert alert-danger" @mousemove="onMoveFn($event, 100)">
验证鼠标绑定事件.
</div>
</div>
</div>
</div> <script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
counter:0
},
methods: {
addCounter(num=1) {
this.counter += num;
}, onMoveFn(ev, num) {
console.log(ev.target) //获取鼠标移动到哪个事件<div class="alert alert-info">...</div>
console.log(ev) //MouseEvent{}
console.log(num) //100
//ev 是获取的event 对象
console.log(ev.pageX, ev.pageY) //获取点击事件的位置坐标
}, }
})
</script>
</body>
</html>
2.2 事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认动作
.capture 捕获阶段触发事件
.once 只绑定一次
.self 只有本身才触发
.passive 优化移动端的scroll事件 <p @click.stop="">
<p @click.stop.prevent="">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 事件</title>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<style>
.box {
width:200px;
height:200px;
border:1px solid red;
}
.inner {
width:100px;
height:100px;
margin:50px;
background: pink
}
</style>
</head>
<body>
<div id="app" class="container">
<div class="page-header">
<h1>Vue 事件修饰符 键盘修饰符</h1>
</div> <div class="row">
<div class="col-md-12">
<div class="box" @click.self="boxFn"> <!--@click.self 意思是只有点自己才执行-->
<!--捕获：有外向内-->
<!--冒泡：由内向外-->
<div class="inner" @click.stop="innerFn"></div> <!--有效的阻止了事件冒泡,指定了点击内部时只有内部的触发冒泡，父类的不触发-->
</div>
</div>
</div> <hr> <div class="row">
<div class="col-md-6"> <input type="text" class="form-control" @keyup.65="onkeyupFn"> <!--捕获点击A键-->
<input type="text" class="form-control" @keyup.enter="onkeyupFn"> <!--捕获点击enter键-->
<input type="text" class="form-control" @keyup.ctrl.65="onkeyupFn"> <!--捕获点击Ctrl+A键--> </div>
</div>
</div> <script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:'#app',
methods: {
boxFn(){
console.log('box');
},
innerFn(){
console.log('inner');
//event.stopPropagation();
},
onkeyupFn(event) {
console.log('按了 '+event.keyCode+' 按键')
}
}
})
</script>
</body>
</html>
2.3 键盘修饰符
.enter
.space
.tab
.up
.left
.right
.down
.delete
.数字 (ascii )
2.4 系统按键修饰符
.ctrl
.alt
.shift
.meta <input @keyup.ctrl.enter> 按住ctrl再按回车
3 表单
文本
input:text textarea v-model checkbox 单个（绑定到布尔值）
true-value false-value true/false checkbox 多个复选框（绑定到同一个数组中） 单选按钮（绑定value对象的字符串）
input:redio v-model value值 select选择框 option的value值 多选 multiple, 数组
v-model.trim
v-model.number 把值转为 number 类型
v-model.lazy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单数据绑定</title>
<style>
p {
border: 1px solid #ccc;
width: 600px;
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<h1>表单数据绑定</h1>
<hr> <input type="text" v-model="message">
<br>
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
<br> <h3>单个复选框(绑定到布尔值checkVa101 即下面checkKVal01:true)</h3>
<!--type:checkbox v-model:指定一个-->
<input type="checkbox" v-model="checkVal01" true-value="yes" false-value="no">全选
<br> <h3>多个复选框(绑定到同一数组loveList 即下面loveList:['lanball'])</h3>
<input type="checkbox" value="lanball" v-model="loveList">篮球
<input type="checkbox" value="zuball" v-model="loveList">足球
<input type="checkbox" value="bangball" v-model="loveList">棒球
<input type="checkbox" value="paiball" v-model="loveList">排球 <h3>单选按钮(绑定value对象的字符串 即下面sex:'male',)</h3>
<input type="radio" v-model="sex" value="male"> 男
<input type="radio" v-model="sex" value="female"> 女 <h3>选择框（绑定对应所选的值 即下面address:'上海'）</h3>
<select v-model="address">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
</select> <h3>修饰符number\lazy</h3>
<!--.number将输入的信息转为数字类型-->
<!--.lazy失去焦点 内容变化-->
<!--.trim取出两端的空格-->
<input type="text" v-model.number.lazy="num"> <p> {{num}} </p>
<p> {{address}} </p>
<p> {{sex}} </p>
<p> {{loveList}} </p>
<p>{{checkVal01}}</p>
<p>{{ message }}</p>
<p>{{ message }}</p> </div> <script src="../dist/js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data:{
message:'同志',
checkVal01: true,
loveList:['bangball'], //多个复选框要绑定到同一个数组中(括号里面可以写默认选中的值)
sex:'male',
address:'广州',
num:0
}
})
</script>
</body>
</html>
aaaaaaaaaaaaaa
获取表单input里面的数据信息
<input v-model="formData.username">
<input v-model="formData.pwd">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取input表单数据信息</title>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<style> </style>
</head>
<body> <div id="app">
<div class="container">
<div class="page-header">
<h1>表单提交</h1>
</div> <div class="row">
<div class="col-md-6">
<!--设置@submit.prevent=''，限制表单提交-->
<form @submit.prevent="">
<div class="form-group">
<!--label中的for绑定input中的id值，可以实现点击'用户名'的时候也可以获取input的焦点-->
<label for="textInput">用户名</label>
<input id="textInput" type="text" class="form-control" v-model="loginData.username" placeholder="请输入用户名">
</div> <div class="form-group">
<label for="#">密码</label>
<input type="password" class="form-control" v-model="loginData.pwd">
</div> <div class="checkbox">
<label for="#">
<!--loginData.remember:true默认是选中，''默认是空-->
<input type="checkbox" v-model="loginData.remember"> 记住密码
</label>
</div> <!--button绑定了login（）方法，点击之后后台可以获取所有表单的值-->
<button class="btn btn-success btn-block" @click="login()">登 录</button>
</form>
</div>
</div>
</div>
</div> <script src="../dist/js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data: {
loginData: {
username:'',
pwd:'',
remember:'', //单选框默认状态是没选
}
},
methods: {
login() {
//获取所有表单的值
console.log(this.loginData)
}
}
})
</script>
</body>
</html>
Vue样式绑定、事件绑定的更多相关文章
- vue中滚动事件绑定的函数无法调用问题
问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...
- Vue.js04：vue样式-通过属性绑定方式为元素设置class类样式
<!-- 传统写法 --> <h1 class="red thin">这是一个h1标签</h1> <!-- 第一种使用方式,直接传递一个数 ...
- vue之click事件绑定
1.@click不光可以绑定方法,也可以就地修改data里的数据 代码示例代码如下: 2.@click绑定多个操作的时候用:隔开 代码示例代码如下: <el-table><el-ta ...
- Vue 属性绑定v-bing 事件绑定v-on
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序中的事件绑定
前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- 微信小程序(三)-事件绑定
小程序事件绑定 https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html 1.数据 / ...
- JS 中的事件绑定、事件监听、事件委托
事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...
- 每日分享！～ JavaScript中面试基础--1，数组检测的方式 2.传统事件绑定和W3C标准绑定事件的区别～
javaScript 那些方式中检测数据类型 typeof typeof isNaN // 结果是function 检测数组的几种方式 instanceof arr instanceof Array( ...
- JS 事件绑定、事件监听、事件委托详细介绍
原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
随机推荐
- 用指针的方式实现，重写strrchr函数的功能
char *strchrTest(char * ptr,char c); Action(){ char str[]={"thisisadog"}; char c='s'; lr_o ...
- asp页面无法访问，可尝试开始SQL Server等服务
存在问题 asp页面的英文提示,翻译后为: "一个错误发生在服务器在处理URL.请联系系统管理员(管理人).如果您是系统管理员,请点击这里了解更多关于这个错误." 解决方案 请 ...
- MyEclipse7.0 M1下载和注册码
首先介绍下,这款MyEclipse7.0 M1已经内置了Eclipse3.4,所以无需再去下载. 1.下载地址: http://downloads.myeclipseide.com/downloads ...
- UVA 11997 K Smallest Sums （多路归并）
从包含k个整数的k个数组中各选一个求和,在所有的和中选最小的k个值. 思路是多路归并,对于两个长度为k的有序表按一定顺序选两个数字组成和,(B表已经有序)会形成n个有序表 A1+B1<=A1+B ...
- javaweb基础(22)_Servlet+JSP+JavaBean实战登陆
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
- c++ 创建路径方法
linux.unix平台 #include "stdio.h" #include "stdlib.h" #include <sys/types.h> ...
- Android读书笔记四
第四章 这是一次源代码之旅,学到了如何下载和编译Android源代码和Linux内核源代码.来详细阐述一下一些具体过程 一.Android源代码下载环境 1.安装下载Android源代码的环境配置 ( ...
- 头文件string与string.h的区别
在C++中,#include<iostream>与#include<iostream.h>的区别,前者要使用更新的编译器(其实大部分编译器多比较前卫了,出了有些搞嵌入式的用变态 ...
- 洛谷 P1835 素数密度
https://www.luogu.org/problemnew/show/P1835 对于40%,对每个数进行最大$O(\sqrt n)$的判断,因为n比较大所以超时. 想到线性筛,然而我们并不能筛 ...
- [BZOJ] 1127: [POI2008]KUP
似曾相识的感觉 考虑另一个判断问题,给定一个k,问这个k是否可行 存在矩形和\(sum>2k\),则该矩阵不对判定做出贡献 存在矩形和\(sum\in [k,2k]\),则我们找到了一个解 于是 ...