[js高手之路] vue系列教程 - vue的事件绑定与方法(2)
2024-09-24 12:31:43
一、在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做
window.onload = function () {
var c = new Vue({
el : 'body',
methods : {
say : function(){
alert( '欢迎学习vue' );
}
}
});
} <input type="button" value="点我" v-on:click="say();"/>
添加方法,需要在vue实例的对象参数中,添加一项methods配置, methods是字面量方式,如上例,我们添加了一个say方法, 在按钮中绑定了一个点击事件,当事件触发的时候,执行say();
二、绑定双击事件,通过在methods方法中定义的函数,操作data中的数据
window.onload = function () {
var c = new Vue({
el : 'body',
data : {
arr : [ 10, 20, 30 ]
},
methods : {
change : function(){
this.arr.push( 40 );
}
}
});
} <input type="button" value="点我" v-on:dblclick="change();"/>
<ul id="box">
<li v-for="value in arr">{{value}}</li>
</ul>
上述例子,通过在按钮中绑定双击事件,当事件触发时,调用change方法, 通过this.arr 访问data中定义的数组arr, 向arr中push值40,那么data中的arr数据就被修改了,基于vue是MVVM驱动方式, 那么arr的修改 就会 实时更新到视图中.结果就是在ul下面新增一项li,值为40
三、指令:v-show,值为false/true. 当为false时,该元素隐藏,当为true时,该元素显示.
<style>
div {
width: 200px;
height: 200px;
background: red;
float:left;
margin:20px;
}
</style>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
var c = new Vue({
el : 'body', });
}
</script>
<div v-show="true"></div>
<div v-show="true"></div>
<div v-show="false"></div>
输出结果:
<div></div>
<div></div>
<div style="display: none;"></div>
四、点击按钮,实现div显示与隐藏
<style>
div {
width: 200px;
height: 200px;
background: red;
}
</style>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
var c = new Vue({
el: 'body',
data: {
flag: false
},
methods : {
toggle : function(){
this.flag = !this.flag;
}
}
});
} <input type="button" value="点我" v-on:click="toggle();"/>
<div v-show="flag"></div>
最新文章
- 前端学HTTP之报文起始行
- UNION和UNION ALL
- Lombok 安装、入门 - 消除冗长的 java 代码
- Get sdcard directory by adb
- java 入门 第二季2
- js封装 与 js高级用法 问题集合
- swift皮筋弹动发射飞机
- 模块化JavaScript设计模式(一)
- C#向C++编写的DLL传递字符串参数的办法
- uboot内存分布
- jQuery.extend函数详细用法!
- 关系型数据库工作原理-高速缓存(翻译自Coding-Geek文章)
- og协议-有利于SNS网站分享
- Django学习手册 - 模板继承与导入
- .NET Core 使用 Kestrel
- maven编译不通过:软件包com.sun.org.apache.xml.internal.security.utils.Base64 不存在
- .2-浅析webpack源码之打包后文件
- Gym 101933
- 2016年第七届蓝桥杯C/C++程序设计本科B组省赛
- Information Retrieval II
热门文章
- 深入常用CSS声明(一) —— Background
- windows MySQL 5.6.38 安装步骤
- Qt 显示图片的三种方法
- jquery on()动态绑定元素的的点击事件无反应的问题记录
- 分布式文件系统及FastDFS
- 论文笔记:Chaotic Invariants of Lagrangian Particle Trajectories for Anomaly Detection in Crowded Scenes
- 【quickhybrid】架构一个Hybrid框架
- MVC(二)
- SGD
- 《深入理解Java虚拟机:JVM高级特性与最佳实践》【PDF】下载