vue教程1-04 事件 v-on:click="函数"
vue教程1-04 事件 v-on:click="函数"
v-on:click/mouseout/mouseover/dblclick/mousedown.....
实例：为data添加数据
实例，点击按钮，div显示/隐藏切换
实例，vue实现简易留言本
事件:
v-on:click="函数" v-on:click/mouseout/mouseover/dblclick/mousedown..... new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){ //方法，这里是show，不能用alert
alert(1);
}
}
});
实例：为data添加数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
add:function(){
this.arr.push('tomato');//this指代new Vue()，也是data
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:dblclick="add()">
<br>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>
</html>
实例：点击按钮，div显示/消失，切换。v-show="a"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
a:true
},
methods:{
adjust:function(){
console.log(this.a);
if(this.a == true){
this.a = false;
}else{
this.a = true;
}
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="adjust()">
<div style="width:100px; height:100px; background: red" v-show="a"> </div>
</div>
</body>
</html>
实例：vue简易留言本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery-1.7.2.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
myData:[],
username:'',
name:'',
age:'',
nowIndex:-100
},
methods:{
add:function(){
this.myData.push({
name:this.username,
age:this.age
}); this.username='';
this.age='';
},
deleteMsg:function(n){
if(n==-2){
this.myData=[];
}else{
this.myData.splice(n,1);
}
}
}
});
};
</script>
</head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">
</div>
<div class="form-group">
<label for="age">年 龄:</label>
<input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age">
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
<input type="reset" value="重置" class="btn btn-danger">
</div>
</form>
<hr>
<table class="table table-bordered table-hover">
<caption class="h3 text-info">用户信息表</caption>
<tr class="text-danger">
<th class="text-center">序号</th>
<th class="text-center">名字</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="item in myData">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除</button>
</td>
</tr>
<tr v-show="myData.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer" >删除全部</button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan="4" class="text-center text-muted">
<p>暂无数据....</p>
</td>
</tr>
</table> <!--模态框 弹出框-->
<div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">确认删除么?</h4>
</div>
<div class="modal-body text-right">
<button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
vue教程1-04 事件 v-on:click="函数"的更多相关文章
- vue 的点击事件怎么获取当前点击的元素
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 首先 vue的点击事件 是用 @cl ...
- vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件
vue教程1-05 事件 简写.事件对象.冒泡.默认行为.键盘事件 v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @clic ...
- vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- [转]vue数据绑定(数据,样式,事件)
1.mounted 与 methods 与 computed 与 watched区别 From:https://blog.csdn.net/qinlulucsdn/article/details/80 ...
- Vue样式绑定和事件处理器
一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
- CPF 入门教程 - 属性和事件（七）
CPF C#跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) CPF 入门 ...
- Vue（四）事件和属性
1. 事件 1.1 事件简写 v-on:click="" 简写方式 @click="" <button v-on:click="show&quo ...
- vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
随机推荐
- 使用docker 安装 GITLIB
在安装 gitlib 社区版时,配置老不成功,改成使用docker安装 比较顺利,省事. 1外部卷配置 docker 需要配置一些卷在外部,创建一下git的目录 我们创建一个在home下 创建一个gi ...
- CAS 界面根据不同的域名显示不同的界面
概要 在实际需求中,客户想通过不同的域名显示不同的登录界面,比如输入 manage.aps.cn 显示运维管理登录,business.aps.cn 显示业务管理登录. 实现方法 1.准备两套登录UI ...
- SVD图片有损压缩测试
注意文件名别保持成svd.m,这样与系统的默认svd程序冲突 图片处理函数生成的三组二维数组对应RGB,处理时保留一组 clear all; close all; clc; a1=imread('C: ...
- Struts2--HelloWord
Struts2官网 官网指南 官网下载Struts2.5-min-lib.zip解压把lib目录下jar包拷贝到web项目lib目录下 配置web.xml文件 <filter> <f ...
- python_day1_python简单介绍
一.python解释器的种类 我们都知道python是一种解释型的语言,那python在执行的过程中必须要通过解释器来执行,那python的解释器到底分为哪些呢? 1.Cpython CPython是 ...
- .net升级到4.0之后，出现;System.Windows, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798
今天在做从Silverlight页中跳转到aspx页的时候,出现错误: 第一次跳转的时候就出现这个错误,然后在点跳转或者刷新这个错误页面,问题就没有了. 解决方案: 在C:\Program Files ...
- oracle 监听文件 说明
MAR:电脑笔记 不做整理 .. ORACLE_SID=orcl2 instance_name=sicca 静态注册文件中SID_NAME=ORACLE_SID 动态注册的时候是用的instance_ ...
- Django-类视图与中间件
------类视图 1.类视图引入 def register(request): """处理注册""" # 获取请求方法,判断是GET/ ...
- 学习c++需要知道
1.c++投入和经济产出比目前较低,c++很复杂,学习难度高.周期长.而且开发效率低. 2.但是c++趋紧于完美语言,它囊括了多种编程范型.它运行效率高,对计算机有着极致的控制能力.适用于低层. 3. ...
- POJ3320 Jessica's Reading Problem 2017-05-25 19:55 38人阅读 评论(0) 收藏
Jessica's Reading Problem Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12346 Accep ...